#wrap { z-index: 5; }
#wrap * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
/* section */
section >* { z-index: 3; }
section .title_box { font-weight: 600; padding: 20px 0; font-size: max(2.1 * (1vw + 1vh)/2,23px); letter-spacing: 3px; color: var(--triadic2); line-height: 1.4; }
section .emtitle_box { font-style: unset; font-size: max(4.1 * (1vw + 1vh)/2,30px); font-weight: 200; display: block; text-transform: uppercase; color: var(--primary); line-height: 1.2; font-family: "Lora",serif; letter-spacing: 3px; }
section .emtitle_box:first-letter { color: var(--triadic2) }
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%); }
.webh1 { font-weight: 600; padding: 0 0 40px; font-size: max(1.9 * (1vw + 1vh)/2,21px); letter-spacing: 1px; color: var(--triadic2); line-height: 1.6; }
section .center_title { display: flex; flex-direction: column; align-items: center; }
@property --a { syntax: "<percentage>"; initial-value: 0%; inherits: true; }
section .gooeyBtn { --a: 0%; --x: 50; --y: 50; --button: var(--primary); display: inline-flex; align-items: center; justify-content: center; min-width: 190px; min-height: 80px; border: 0; outline: 0; border-radius: 999px; text-decoration: none; cursor: pointer; color: #fff; font-size: 16px; font-weight: 400; letter-spacing: 0.03em; position: relative; padding: 0 30px; transition: --a .5s ease-in-out,scale var(--spring-duration) var(--spring-easing); isolation: isolate; }
section .gooeyBtn:hover { --a: 100%; scale: 1; }
section .gooeyBtn:before { content: ""; position: absolute; inset: 0; border-radius: 999px; filter: blur(10px) url(#goo); background-image: linear-gradient(0deg,var(--primary),var(--primary)),radial-gradient(40% 70% at calc(var(--x) * 1%) calc(var(--y) * 1%),rgba(var(--primary-rgb),var(--a)) 0%,transparent 90%); background-clip: content-box,border-box; padding: 12px; z-index: -1; }
/*indexabout*/
#indexabout,#service_area { align-items: end; }
#indexabout:before { content: ''; position: absolute; width: 100%; height: 1px; background: #eee; top: 11vw; }
#indexabout .sk_left { padding-bottom: 6vw; }
#indexabout .emtitle_box { margin-bottom: 20px; }
#indexabout .article { margin: 0 0 60px; width: 95%; }
#indexabout .article p { font-weight: 400; line-height: 2.3; font-size: 17px; text-align: justify; color: #4b4b4b; }
.skw-page-4 .sk_left .more_btn::after { background: var(--secondary) }
.skw-page-4 .sk_left .more_btn:hover { border-color: var(--secondary) }
/*indexservice*/
#indexservice .tit { position: absolute; right: 0; top: 0; padding: 5% 5% 40px; width: 100%; }
#indexservice .tit * { text-align: center; }
#indexservice .tit .title_box { margin-top: 5px; }
#indexservice .pom_list { height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 5%; }
#indexservice .btn { display: flex; margin: 0 25% 30px; padding: 0; gap: 10px; position: relative; z-index: 2; justify-content: flex-end; }
#indexservice .btn button { padding: 15px; width: 65px; aspect-ratio: 1/1; cursor: pointer; border-radius: 50px; position: absolute; bottom: 20px; background: var(--secondary); }
#indexservice .btn button svg { width: 16px; height: 16px; fill: white; }
#indexservice .btn #product_prev { transform: scaleX(-1); left: 0; }
/* product_area */
#product_area { padding: 400px 0 240px; background: url(/images/44/indexproduct_bg.jpg); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#product_area #product_list { width: 100%; }
#product_area .workframe { width: min(1520px,90%); display: flex; flex-direction: column; align-items: center; }
#product_list * { transition: all 0s ease-in-out; -webkit-transition: all 0s ease-in-out; }
#product_area:before { content: ""; position: absolute; right: 11vw; animation-name: fish; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 2s; }
@keyframes fish {
  0% { transform: rotate(-4deg); }
  100% { transform: rotate(4deg); }
}
#product_area .tit { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: center; width: 39%; background: var(--primary); padding: 110px 0 100px; border-radius: 20px; box-shadow: 0 0 24px 6px rgb(19 32 44); }
#product_area .tit * { color: #f1f1e8; }
#product_area .more_btn { background: #f1f1e8; color: var(--primary); }
#product_area .btn { position: absolute; width: 104%; bottom: 42%; padding: 0; display: flex; justify-content: space-between; z-index: 1; pointer-events: none; }
#product_area .btn a { pointer-events: auto; }
#product_list:after { content: ''; width: 100%; position: absolute; bottom: 7.5%; left: 0; z-index: -1; height: 100%; border-radius: 500px; }
#product_list li { display: flex; align-items: center; justify-content: center; margin: 0 20px; flex-direction: column; opacity: 1; background-repeat: no-repeat; background-size: cover; padding: 0; border-radius: 0; }
#product_list li.slick-active { opacity: 1; }
#product_list li .cateJaitem { position: absolute; top: 0; padding: 10px 20px; font-size: 20px; background: #059b57; color: #ffffff; border-radius: 0 0 15px 15px; display: none; }
#product_list li:hover .clip img { transform: scale(1.1); }
#product_list li img {
  object-fit:cover;width:100%;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s 
ease-in-out;
}
#product_list li .clip { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 56/65; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; z-index: 2; }
#product_list li .clip:before { content: ""; position: absolute; width: 100%; height: 100%; z-index: 2; background: linear-gradient(to bottom,rgb(0 0 0/0%),rgb(23 24 25/60%)); }
#product_list li .nfo_box { margin-top: 0; position: absolute; bottom: 4vh; z-index: 3; display: flex; flex-direction: column; align-items: center; padding: 0 15%; }
#product_list li .nfo_box em { color: #831212; font-family: "Lato",serif; font-size: 18px; font-weight: 400; font-style: unset; display: block; margin-bottom: 10px; text-transform: uppercase; }
#product_list li .nfo_box .h3 { font-size: 24px; height: auto; font-weight: 400; letter-spacing: 1px; color: #ffffff; }
#product_list li .infott { margin: 20px 0 10px; -webkit-line-clamp: 2; color: white; height: auto; font-size: 15px; text-align: justify; letter-spacing: .5px; font-weight: 300; }
#product_list li p { color: white; font-size: 13px; font-family: "Inter",sans-serif; font-weight: 200; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; text-align: center; }
/*pocess_box*/
.skw-page-5 .title_box { padding-bottom: 5px; }
.pocess_box { height: 100vh; background: white; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.pocess_box .poocess_item { display: flex; flex-direction: column; width: 80%; transform: translate3d(0,100%,0); transition: transform 1s; }
.skw-page.active .pocess_box .poocess_item { transform: translate3d(0,0%,0); }
.pocess_box .poocess_item .coolist { display: grid; margin: 40px 0 0; flex-direction: column; width: 100%; grid-template-columns: repeat(4,1fr); gap: 2px; }
.pocess_box .slick-list { width: 100%; }
.pocess_box .btn { width: 100%; display: flex; justify-content: space-between; align-items: center; position: absolute; margin-top: 43px; z-index: 8; }
.pocess_box .btn a { padding: 15px; }
.pocess_box .btn #pocess_box_prev { background: #ff8c42; }
.pocess_box .btn #pocess_box_next { background: #ff8c42; }
.pocess_box .defanJ { position: relative; display: flex!important; flex-direction: column; align-items: center; gap: 10px; background: white; padding: 20px 15%; }
.pocess_box .defanJ .img { display: flex; width: 80px; aspect-ratio: 1/1; background: #eff4fd; align-items: center; justify-content: center; border-radius: 50px; }
.pocess_box .defanJ img { width: 35px; aspect-ratio: 1/1; object-fit: contain; }
.pocess_box .defanJ .h3 { text-align: center; color: var(--primary); font-size: 20px; font-weight: 500; }
.pocess_box .defanJ .h3:after { display: block; content: ''; width: 50px; height: 2px; background: var(--primary); margin: 10px auto 20px; }
.pocess_box .defanJ p { font-size: 15px; color: #4b4b4b; text-align: justify; height: auto; -webkit-line-clamp: 3; }
.pocess_box .defanJ .conumber { font-size: max(4.2*(1vw + 1vh)/2,44px); font-weight: 600; color: var(--primary); width: 100%; display: flex; flex-direction: column; align-items: center; border-bottom: #ababab 1px solid; height: 110px; }
.pocess_box .defanJ .cotitle { font-size: max(1.7*(1vw + 1vh)/2,18px); color: var(--primary); }
.pocess_box .codote { position: absolute; display: flex; width: 10px; aspect-ratio: 1/1; background: #707070; top: 105px; border-radius: 666px; }
/* about_area */
#about_area { padding: 10vw 0 5vw; position: relative; background: #f1f1e8; }
#about_area:before { content: ''; position: absolute; width: 8vw; right: 0; top: 0; background: url(/images/44/right_canJ.png); aspect-ratio: 159/322; background-size: cover; z-index: 23; }
#about_area:after { content: ''; position: absolute; width: 100%; height: 140%; background: url(/images/44/down_abbg.png); z-index: 2; top: 0; background-size: contain; background-repeat: no-repeat; pointer-events: none; }
#about_area * { color: var(--primary); }
#about_area .more_btn { background: var(--primary); color: white; }
#about_area .workframe { display: grid; grid-template-columns: 47% 47%; gap: 6%; }
#about_area #about_info { width: 100%; }
#about_area article p { line-height: 210%; font-weight: 300; overflow: hidden; margin: 30px 0 30px; height: 68px; text-align: left; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #384552; }
#about_area .clip { -webkit-clip-path: url(#clip_about); clip-path: url(#clip_about); }
#about_area .about_sub_1 { top: -2vw; left: 24vw; animation-name: fish; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 2s; display: none; }
#about_area .about_sub_1 .clip { -webkit-clip-path: url(#clip_about_sub_1); clip-path: url(#clip_about_sub_1); }
#about_area .about_sub_2 { left: 30vw; z-index: 2; bottom: 0; display: none; }
#about_area .about_sub_2 .clip { -webkit-clip-path: url(#clip_about_sub_2); clip-path: url(#clip_about_sub_2); }
#about_area .about_sub_3 { z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#about_area .about_sub_3:before { content: ""; background: url(/images/44/aboutimg_bg.png); width: 100%; aspect-ratio: 1/1; position: absolute; background-size: cover; animation-name: circle; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 40s; }
#about_area .about_sub_3:after { content: ""; background: url(/images/44/left_Jabar.png); aspect-ratio: 528/163; position: absolute; top: -5vw; left: -21vw; width: 28vw; background-size: cover; }
#about_area .about_sub_3 img { width: min(450px,100%); margin-top: 60px; }
#about_area .about_sub_3 .clip { -webkit-clip-path: url(#clip_about_sub_3); clip-path: url(#clip_about_sub_3); }
@keyframes drinkbox {
  0% { top: 0px; }
  100% { top: -20px; }
}
#about_area #fakeNumber { display: flex; position: relative; margin: 65px 0; }
#about_area #fakeNumber * { color: var(--primary) }
#about_area .evtitle { bottom: -45px; }
#about_area #fakeNumber li { position: relative; display: flex; align-items: center; justify-content: center; width: 72px; aspect-ratio: 1/1; padding: 6px; background: var(--primary); border-radius: 500px; margin-bottom: 45px; }
#about_area #fakeNumber li:after { content: ''; border: 1px solid var(--primary); position: absolute; width: 115%; height: 115%; border-radius: 500px; animation-name: circle; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 40s; opacity: 0.3; }
@keyframes circle {
  0% { transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); -webkit-transform: rotate(0); }
  100% { transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); }
}
#about_area #fakeNumber ul { display: flex; gap: 50px; align-items: flex-end; height: auto; justify-content: center; }
#about_area #fakeNumber li .eva { display: flex; flex-direction: column; align-items: center; }
#about_area #fakeNumber li .h2 { color: #2b2a2a; display: flex; flex-direction: column; align-items: center; font-size: max(0.8*(1vw + 1vh)/2,16px); font-weight: 400; }
#about_area #fakeNumber li .h2 b { font-family: "Anybody",serif; font-size: max(3*(1vw + 1vh)/2,45px); font-weight: 600; line-height: 1; display: block; margin: 5px 0; }
#about_area #fakeNumber li p { font-size: 17px }
#about_area .doown_img { display: flex; width: 30vw; right: 0; bottom: -4vw; }
/* faq_list */
#faq_list { margin-top: 50px; width: 80%; }
#faq_list,#faq_list * { transition: unset; -webkit-transition: unset; }
#faq_list li { border-bottom: 1px rgb(255 255 255/30%) solid; }
#faq_list li:first-child { border-top: 1px rgb(255 255 255/30%) solid; }
#faq_list li .title { padding: 20px 0; }
#faq_list li .title font { vertical-align: top; }
#faq_list li .title .txt { width: calc(100% - 50px); font-size: 20px; margin-right: 10px; }
#faq_list li .title .icon { width: 40px; height: 34px; }
#faq_list li .title .icon:before,#faq_list li .title .icon:after { position: absolute; margin: auto; width: 14px; height: 2px; background: var(--white); display: block; top: calc((100% - 2px)/2); left: calc((100% - 14px)/2); content: ""; }
#faq_list li .title .icon:after { transform: rotate(90deg); -webkit-transform: rotate(90deg); }
#faq_list li .info { padding: 0 0 20px; font-size: 16px; font-weight: 200; }
#faq_list li.current .title .icon:after { transform: rotate(180deg); -webkit-transform: rotate(180deg); }
/* custom_area */
#custom_area { padding: 0 }
#custom_area .workframe { width: 90%; margin: 0; display: grid; grid-template-columns: 50% 42%; justify-content: space-between; }
#custom_area .box { padding: 5vw 0; }
#custom_area .bg img { height: 100%; object-fit: cover; }
#faqlist,#faqlist * { transition: unset; -webkit-transition: unset; }
#faqlist { overflow-y: scroll; height: 430px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
#faqlist li { border-bottom: 1px solid #ddd; padding: 30px 0; width: 95%; }
#faqlist li .icon { font-family: "Anybody",serif; font-size: 20px; font-weight: 600; width: 45px; aspect-ratio: 1/1; background: var(--primary); display: inline-flex; color: #fff; align-items: center; justify-content: center; border-radius: 50px; margin-right: 20px; }
#faqlist li .txt { font-size: 20px; color: #1d1d1d; width: calc(100% - 70px); }
#faqlist li .info { border-top: 1px solid #ddd; margin-top: 20px; padding: 20px 70px 0; color: #6c6c6c; font-weight: 300; text-align: justify; }
#faqlist::-webkit-scrollbar { width: 5px }
#faqlist::-webkit-scrollbar-track { background: rgb(255 255 255/0%) }
#faqlist::-webkit-scrollbar-thumb { background: rgba(0,0,0,.4); border-radius: 50px }
/* news_area */
#news_area .skwbox_two  >div { width: 100%; height: 100%; }
#news_area { padding-bottom: 0; }
#news_area .workframe { height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0; width: 100%; overflow: hidden; }
#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; }
#news_area .nwtwo_box { display: grid; grid-template-columns: 48% 46%; gap: 6%; align-items: center; height: 100vh; }
#news_area .nwleft { padding-right: 20%; }
#news_area .nwright { display: flex; align-items: center; justify-content: center; overflow: hidden; }
#news_area .nwtwo_box .mooimg img { width: 100%; }
.nwlist_box .nw_item { position: relative; display: grid; grid-template-columns: 100px 1fr; grid-template-rows: auto auto; column-gap: 32px; padding: 25px 25px; border-bottom: 1px solid #dedfd9 !important; transition: background .35s ease; }
#news_area .nwlist_box { margin: 2vw 0; }
.nwlist_box .nw_item:first-child { border-top: 1px solid #dedfd9; }
.nwlist_box .nw_item .yesrJ { grid-column: 1; grid-row: 1/3; padding-top: 3px; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: .12em; color: #8c9b7a; }
.nwlist_box .nw_item .nwtitleJ { grid-column: 2; grid-row: 1; margin-bottom: 8px; font-size: 20px; font-weight: 500; line-height: 1.6; letter-spacing: .03em; color: #344b35; transition: transform .35s ease,color .35s ease; height: auto; -webkit-line-clamp: 2; }
.nwlist_box .nw_item .nwduJ { grid-column: 2; grid-row: 2; -webkit-line-clamp: 2; height: auto; }
.nwlist_box .nw_item .nwduJ p { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.9; letter-spacing: .02em; color: #777d74; }
.nwlist_box .nw_item .nwduJ p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.nwlist_box .nw_item .atag_item { z-index: 3; inset: 0; width: 100%; height: 100%; }
.nwlist_box .nw_item:hover { background: #f3f2ed; }
.nwlist_box .nw_item:hover::after { color: #344b35; transform: translate(5px,-50%); }
news_area .nwlist_box { margin-bottom: 70px; }
#news_area:after { content: ''; position: absolute; width: 100%; height: 140%; background: url(/images/44/down_nwbg.png); z-index: 2; top: 0; background-size: contain; background-repeat: no-repeat; pointer-events: none; }
#news_area .flyJJphto-1 { right: 0; top: 4vw; }
#news_area .flyJJphto-1 img { animation: float 4s linear infinite; }
#news_area .flyJJphto-2 img { animation: float 6s linear infinite; }
#news_area .flyJJphto-2 { bottom: 0vw; left: 3vw; }
@keyframes float {
  0% { transform: translateY(0) }
  50% { transform: translateY(-20px) }
  100% { transform: translateY(0) }
}
#news_area .nw_item .img_box { display: none; }
.nw_follow_preview { position: fixed; z-index: 9999; width: 320px; height: 220px; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease,visibility .25s ease,transform .25s ease; background: #f3f2ed; box-shadow: 0 15px 40px rgba(38,54,43,.16); }
.nw_follow_preview.show { opacity: 1; visibility: visible; transform: translateY(0); }
.nw_follow_preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* service_area */
#service_area .sk_left { padding-bottom: 9vw; }
#service_area:before { content: ''; position: absolute; width: 100%; height: 1px; background: #eee; top: 11vw; }
/* book_area */
#book_area { background: #f3f3f3 }
#book_area:before { content: ""; position: absolute; width: 10vw; left: 5vw; aspect-ratio: 1/1; background: url(/images/44/case_shape_img.png); top: 0; z-index: 2; background-size: cover; animation-name: fish; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 2s; transform-origin: top center; }
#book_area .btn { padding: 0; display: flex; width: 90%; margin: 0 auto; position: absolute; justify-content: space-around; top: 18%; left: 5%; }
#book_area .title_box { padding-bottom: 2vw; }
#book_area .tt { padding-bottom: 4vw; font-size: 17px; }
#book_area .workframe { width: min(90%,1240px); }
#book_area li { background: #fff; border-radius: 0 60px; margin: 0 20px; overflow: hidden; }
#book_area li img { aspect-ratio: 4/3; object-fit: cover; }
#book_area li .h3 { font-weight: 500; height: 45px; font-size: 21px; -webkit-line-clamp: 1; }
#book_area li p { color: #5d5858; -webkit-line-clamp: 2; margin: 15px 0; height: 55px; font-size: 15px; display: none; }
#book_area li .info { padding: 30px 40px 40px; }
#book_area li span { color: #f39800; font-size: 16px; }
.obslink { width: 16px; aspect-ratio: 1/1; position: absolute; right: 20px; bottom: 20px; background: var(--primary); border-radius: 666px; padding: 20px; }
#book_area li:hover .obslink { background: var(--secondary); }
#book_area  .obslink img { aspect-ratio: 1/1; object-fit: contain; }
/* photo_area */
#photo_area .item { width: 260px; height: 200px; }
#photo_area .item img { height: 100%; object-fit: cover; }
@media screen and (min-width:1025px) {
  .pocess_box .btn { display: none }
}
@media screen and (max-width:1680px) {
  #about_area .about_sub_1 { left: 9vw; top: 56%; width: 50vw; }
  #about_area .about_sub_2 { left: 35vw; }
}
@media screen and (max-width:1470px) {
  #news_area .nwleft { padding-right: 15% }
  #indexabout:before,#service_area:before { top: 15vw; }
  #indexabout .article p { font-size: 16px; }
  .pocess_box .defanJ p { -webkit-line-clamp: 2 }
  section .title_box { padding: 10px 0; }
  #about_area .about_sub_3:after { width: 22vw; left: -14vw; top: -1vw; }
  #about_area .workframe { grid-template-columns: 43% 44%; gap: 8%; }
  #about_area .doown_img { width: 23vw; bottom: -3vw; }
  #about_area .about_sub_3 img { width: min(350px,100%); }
  #book_area .btn { top: 14.5%; }
  #about_area { border-radius: 0; padding: 6vw 0 3vw; }
  #product_area { padding: 225px 0 240px; }
  #product_list li .nfo_box .h3 { font-size: 18px; }
  #product_list li:before,#product_area:before { zoom: 70%; }
  #product_list li { margin: 0 10px; }
  #product_area .tit { width: 40%; }
  #about_area .about_sub_3 { right: -3vw; }
  #product_list { width: 100%; }
}
@media screen and (max-width:1400px) {
  #indexservice .btn { margin: 0 15% 30px; }
  #indexabout .article { margin-bottom: 30px; }
  #indexabout .sk_left { padding: 3vw 7vw; }
  #indexabout:before,#service_area:before { width: 1px; height: 100%; top: 0; left: 0; }
  .pocess_box .defanJ .img { width: 60px; }
  .pocess_box .defanJ img { width: 25px; }
  .skw-page-5 .tit p { display: none; }
  .pocess_box .poocess_item .coolist { margin-top: 20px; }
}
@media screen and (max-width:1280px) {
  #faqlist li .txt { font-size: 18px; }
  #indexabout,#service_area { align-items: center; }
}
@media screen and (max-width:1024px) {
  #service_area .sk_left { padding: 20px 10%; }
  #service_area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; overflow: hidden; }
  #indexservice .btn { display: flex; justify-content: center; }
  #indexservice .btn button { position: relative; }
  .pocess_box .defanJ .h3 { font-size: 18px }
  .pocess_box .poocess_item { width: 90% }
  #product_area { padding: 80px 0 240px; }
  #product_area .tit { position: relative; width: 100%; background: unset; box-shadow: unset; }
  #product_list li:before,#product_area:before { zoom: 60%; }
  #product_list { width: 100%; margin: 0; }
  #news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
  #news_area .nwtwo_box { display: flex; flex-direction: column; }
  #news_area .nwtwo_box .nwleft { display: flex; flex-direction: column; width: 100%; padding: 0 10% 5%; }
  #news_area { padding-bottom: 50px; }
  #about_area .workframe { grid-template-columns: 38% 44%; }
  #about_area #fakeNumber ul { gap: 25px; }
}
@media screen and (max-width:980px) {
  #news_area .nwlist_box { margin-bottom: 4vw; }
  #news_area .nwtwo_box .nwleft { width: 85%; margin: 0 auto; padding: 0; }
  #service_area .sk_left { padding: 0; }
  .pocess_box .poocess_item .coolist { grid-template-columns: repeat(2,1fr); }
  .skw-page-3 { background: #f8fafe; padding-bottom: 0; }
  section { padding: 8vw 0; }
  .skw-page-5 { padding: 0; }
  #about_area .about_sub_3:after,#about_area .doown_img { display: none; }
  #custom_area .workframe { grid-template-columns: 1fr; width: 100%; }
  #custom_area .box { width: 90%; margin: 0 auto; padding: 8vw 0; }
  #book_area .tt { padding-bottom: 7vw; }
  #book_area .btn { justify-content: space-between; top: 13.5%; }
  @keyframes drinkbox {
    0% { top: 40% }
    100% { top: 50% }
  }
  #faq_list { width: 100%; }
  .pocess_box,#indexservice .pom_list { height: auto; padding: 0; }
  .skw-page-5 { background: #f8fafe; }
  #product_list li .clip { aspect-ratio: 3/4; }
  #indexservice .btn { width: 95%; display: flex; justify-content: flex-end; align-items: center; z-index: 6; margin: -90px auto 30px; }
  #about_area .workframe { grid-template-columns: 1fr; justify-items: center; }
  #product_list:after { border-radius: 20px; bottom: 0; }
  #product_list li:before { bottom: unset; top: 22%; }
  #product_list li { margin: 0; }
  #product_area .tit { position: relative; }
  #product_list { width: 100%; padding-bottom: 0; }
  #indexservice .tit { position: relative; padding: 0; display: flex; align-items: flex-start; width: 85%; margin: 0 auto 30px; }
  #product_area { padding: 90px 0 70px; }
  #about_area #about_info { margin-bottom: 8vw; display: flex; flex-direction: column; align-items: center; }
  #about_area .about_sub_2 { top: auto; bottom: 28vw; width: 30vw; left: 17vw; }
  #about_area .about_sub_3 { width: 29vw; right: unset; }
  #custom_area .bg img { display: none; }
  .tit { display: flex; flex-direction: column; align-items: flex-start; }
  #indexabout { display: flex; flex-direction: column; }
  #indexabout .sk_left,#indexabout .sk_right,#indexabout .sk_center { width: 85%; margin: 20px auto; display: flex; flex-direction: column; padding: 3vw 0; }
  #indexabout .sk_center { display: none; }
  #indexabout .sk_right { order: -1; }
  #indexabout .sk_right img { aspect-ratio: 5/3; object-fit: cover; }
  .pocess_box .poocess_item { transform: translate3d(0,0%,0); }
  #news_area .workframe { height: auto }
}
@media screen and (max-width:760px) {
  #news_area .nwtwo_box { height: auto; gap: 40px 0; }
  #news_area .nwtwo_box .nwright { display: block; width: 100%; }
  #news_area .nwtwo_box .mooimg img { height: 300px; object-fit: cover; }
  #indexservice .btn button { bottom: 0 }
  #indexservice .tit { align-items: center; }
  #indexabout .sk_left,#indexabout .sk_right,#indexabout .sk_center { margin: 0 auto; }
  .pocess_box .defanJ .h3 { font-size: 17px; }
  .pocess_box .defanJ p { -webkit-line-clamp: 3; font-size: 14px; letter-spacing: .25px; }
  #wrap:before,#news_area:before { display: none; }
  #custom_area .bg img { height: auto; }
  #about_area .about_sub_3 { width: 63vw; }
  #about_area .about_sub_3:before { width: 120%; }
  #about_area .about_sub_1 { left: 1vw; top: 64%; width: 80vw; }
  #about_area { border-radius: 0; }
  #product_list li .nfo_box .h3 { font-size: 20px; }
  section,#product_area,#about_area { padding: 14vw 0; }
  .skw-page-4 { padding-bottom: 10vw }
  .nwlist_box .nw_item:hover { background: transparent; }
  .nwlist_box .nw_item { padding: 25px 0; }
  #product_sub_list>div { margin: 10px auto 50px; }
  #product_sub_list li { width: 150px; }
  #product_sub_list li .clip { height: 150px; }
  #product_list { width: 90%; margin: 0 auto; }
  #product_list li .info_box { width: 45vw; height: 30vw; }
  #product_list li img { width: 100%; }
  #about_area #fakeNumber ul { display: grid; grid-template-columns: repeat(2,1fr); }
  #product_area .btn a { width: 30px; }
  #indexabout .article { margin: 0 0 50px; width: 100%; }
  #indexservice .btn #product_next { background: var(--secondary); }
}
@media screen and (max-width:550px) {
  .pocess_box .defanJ { padding: 20px; }
  #about_area:before,section .emtitle_box:before { display: none; }
  #book_area .btn { display: none; }
  @keyframes drinkbox {
    0% { top: 50% }
    100% { top: 55% }
  }
  #product_list li { margin: 0 20px; }
  #product_list li .nfo_box { margin-top: 20px; }
  #product_list li:before { top: 13%; zoom: 47%; }
  #product_area:before { zoom: 40%; }
  #product_sub_list li { margin: 10px; width: 35vw; }
  #product_sub_list li .clip { height: 35vw; }
  #product_list { width: 90vw; }
  #product_list li .clip img { margin: 0 auto; }
  #product_list li .info_box { width: 55vw; height: 40vw; }
  #about_area #about_img { width: 80vw; }
  #about_area .about_sub_2 { bottom: 68vw; width: 50vw; left: 3vw; }
  #news_area li .row { margin: auto; width: 280px; }
  #faqlist li .info { padding: 20px 0 0 }
  .pocess_box { padding: 50px 0; }
  .pocess_box .emtitle_box { text-align: center; }
}
@media screen and (max-width:480px) {
  #book_area li.row { margin: auto; width: 250px; }
  #indexservice .btn { margin: 30px 0; display: flex; justify-content: center; width: 100%; order: 2; }
  .pocess_box .poocess_item .coolist { width: 100%; }
}