#wrap {z-index: 2;background: #f6f5fb;}

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box { padding-bottom: 3vw; font-style: italic; font-size: 38px; }
section .sec-title h2 {margin: 0;font-size: 80px;line-height: 1;color: #0068b7;font-weight: 800;position: relative;display: inline-flex;flex-direction: column;align-items: flex-start;}
section .sec-title h2:after{content:'';width: 100%;display: block;background: url(/images/44/img-title-wave.png);height: 6px;background-size: contain;background-repeat: repeat-x;margin-top: 10px;animation: titleWaveMove 13s linear infinite;}
@keyframes titleWaveMove {  0% { background-position-x: 0; }  100% { background-position-x: 200px; }}
section .sec-title p {color: var(--info);font-size: 18px;line-height: 1.8;margin-top: 18px;width: 40%;}
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 .read-more {display: inline-flex;align-items: center;background: linear-gradient(90deg,#0bb4e9,#2022a7);color: #fff;font-size: 14px;font-weight: 500;letter-spacing: 1px;overflow: hidden;transition: transform .35s ease,box-shadow .35s ease;border-radius: 5px;height: 55px;line-height: 0;white-space: unset;padding-left: 30px;}
section .read-more:before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent); transform: translateX(-120%); transition: transform .6s ease; }
section .read-more:hover {transform: translateY(-4px);}
section .read-more:hover:before { transform: translateX(120%); }
section .read-more span {width: 45px;height: 28px;margin-left: 20px;display: grid;place-items: center;font-size: 19px;transition: transform .35s ease;border-left: 1px solid rgb(255 255 255 / 25%);}
section .read-more span svg{width:12px;height: 12px;}
section .read-more:hover span { transform: translateX(4px); }

/* product_area */
#product_area {position: relative;background-size: cover;background-repeat: no-repeat;background-position: 50% 65%;}
#product_area:after{content:url(/images/44/img-bubbles2.png);position: absolute;right: 70px;z-index: 2;bottom: -20px;animation: aboutImgAnimation 10s ease-in-out infinite;zoom: 95%;}
#product_area .workframe{width: min(95%, 1700px);position: relative;}
#product_area .sec-title {width: min(80%, 1300px);margin: 0 auto;position: relative;}
#product_area .top-btn {position: absolute;right: 0;top: 30px;}
#product_area .product-stage { position: relative; height: 520px; margin-top: 20px; }
#product_area .product-carousel {width: 100%;height: 100%;position: relative;}
#product_area .product-track { height: 100%; display: flex; align-items: center; transition: transform .65s ease; }
#product_area .product-item {min-width: calc(100%/3);height: 100%;display: flex;align-items: center;justify-content: center;transition: transform .65s ease,opacity .65s ease;transform: scale(.8);}
#product_area .product-item:hover {transform: scale(.85) translateY(0);}
#product_area .product-circle {position: relative;width: 80%;aspect-ratio: 1/1;border: 1px solid #8cd9f6;border-radius: 50%;background: rgba(255,255,255,.75);text-align: center;color: #0b70b4;transition: all .65s ease;display: flex;flex-direction: column;align-items: center;justify-content: center;}
#product_area .product-circle .num {position: absolute;left: 50%;top: -50px;transform: translateX(-50%);font-size: 0;font-weight: 800;color: #dfe1f4;transition: all .65s ease;font-family: "Oswald", sans-serif;}
#product_area .product-circle h3 {margin: -50px 0 12px;font-size: 30px;font-weight: 500;color: var(--primary);}
#product_area .product-circle p {margin: 0;color: #777;font-size: 22px;}
#product_area .product-circle img {position: absolute;width: 75%;aspect-ratio: 1/1;object-fit: cover;left: 50%;bottom: -35%;transform: translateX(-50%);transition: all .65s ease;}
#product_area .product-item.is-active {transform: scale(1);z-index: 3;}
#product_area .product-item.is-active:hover { transform: scale(1.05) translateY(-6px); }
#product_area .product-item.is-active .product-circle {border: none;background: radial-gradient(circle at 35% 65%, #00d7ff, var(--secondary) 72%);color: #fff;box-shadow: 0 25px 45px rgba(0,80,170,.22);}
#product_area .product-item.is-active .product-circle .num {top: -80px;font-size: 130px;}
#product_area .product-item.is-active .product-circle h3 {font-size: 36px;color: #fff;}
#product_area .product-item.is-active .product-circle p {color: #f6f5fb;font-size: 24px;letter-spacing: 1px;}
#product_area .product-item.is-active .product-circle img {width: 70%;border-radius: 30px;bottom: -120px;transform: translateX(-50%) rotate(35deg);}
#product_area .slide-btn { position: absolute; top: 50%; z-index: 5; width: 54px; height: 54px; border: 0; border-radius: 50%; background: linear-gradient(135deg,#0bc5eb,var(--secondary)); color: #fff; font-size: 28px; cursor: pointer; transform: translateY(-50%); transition: transform .35s ease,box-shadow .35s ease,background .35s ease; }
#product_area .slide-btn:hover { transform: translateY(-50%) scale(1.05); box-shadow: 0 12px 25px rgba(0,82,190,.35); background: linear-gradient(135deg,#27ddff,#2934d7); }
#product_area .slide-btn.prev { left: 31%; }
#product_area .slide-btn.next { right: 31%; }
#product_area .slick-list { overflow: visible; }
#product_area .slick-track { display: flex !important; align-items: center; }
#product_area .slick-slide { opacity: .45; transform: scale(.78); transition: all .7s ease; pointer-events: none; }
#product_area .slick-slide .product-circle { transition: all .7s ease; }
#product_area .slick-center { opacity: 1; transform: scale(1); z-index: 5; pointer-events: auto; }
#product_area .slick-center .product-circle { width: 310px; height: 310px; padding-top: 118px; border: none; background: radial-gradient(circle at 35% 65%,#00d7ff,#2433bf 72%); color: #fff; box-shadow: 0 25px 45px rgba(0,80,170,.22); }
#product_area .slick-center .product-circle .num { top: -58px; font-size: 92px; }
#product_area .slick-center .product-circle h3 { font-size: 26px; color: #fff; }
#product_area .slick-center .product-circle p { color: #fff; font-size: 12px; letter-spacing: 1px; }
#product_area .slick-center .product-circle img { width: 210px; height: 210px; border-radius: 30px; bottom: -120px; transform: translateX(-50%) rotate(-12deg); }
#product_area .product-item { display: flex !important; align-items: center; justify-content: center; }

/* about_area */
#about_area .big-outline { position: absolute; left: 0; top: 10px; width: 100%; overflow: hidden; z-index: 1; pointer-events: none; }
#about_area:before{content:url(/images/44/img-bubbles3.png);position: absolute;right: 8%;top: -50px;}
#about_area .outline-track {width: max-content;display: flex;align-items: center;gap: 120px;animation: outlineMarquee 60s linear infinite;}
#about_area .outline-track span {white-space: nowrap;font-size: 100px;line-height: 1;letter-spacing: 10px;color: transparent;-webkit-text-stroke: 1px rgba(255,255,255,.7);opacity: .7;text-transform: uppercase;font-weight: 600;}
@keyframes outlineMarquee {  0% { transform: translateX(0); }  100% { transform: translateX(-33.333%); }}
#about_area {background-image: url(/images/44/img-aboutbg.png);background-size: 100%;background-position: 50% -220px;background-repeat: no-repeat;position: relative;padding-top: 11vw;}
#about_area >div.pos_rel:before{content:url(/images/44/img-bubbles4.png);position: absolute;top: -140px;left: -40px;animation: aboutImgAnimation 10s ease-in-out infinite;}
#about_area:after{content:url(/images/44/img-bubbles5.png);position: absolute;bottom: 210px;left: -40px;}
#about_area *{text-align:center;}
#about_area .sec-title{display:flex;flex-direction: column;align-items: center;}
#about_area .sec-title h1{margin-top:70px;line-height: 190%;letter-spacing: 1px;font-weight: 800;font-size: 18px;width: min(100%, 600px);}
#about_area .title_box { padding-bottom: 0; }
#about_area article p {line-height: 210%;font-weight: 400;width: min(100%, 600px);margin: 20px auto 50px;}
#about_area .clip {-webkit-clip-path: url(#clip_about);clip-path: url(#clip_about);}
#about_area .about_sub_1 {width: 190px;top: 0vw;left: 14vw;}
#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 {width: 220px;top: 27%;left: -1vw;}
#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 {width: 300px;bottom: 22vw;right: -6vw;}
#about_area .about_sub_3 .clip { -webkit-clip-path: url(#clip_about_sub_3); clip-path: url(#clip_about_sub_3); }
#about_area .about_sub_4 {width: 220px;bottom: 1vw;right: 5vw;}
#about_area .about_sub_4 .clip { -webkit-clip-path: url(#clip_about_sub_3); clip-path: url(#clip_about_sub_3); }
#about_area #about_img{margin-top: 85px;display: flex;flex-direction: column;align-items: center;}
#four_area{position:absolute;top: 15px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 55px 300px;}
#four_area .item{display:flex;flex-direction: row-reverse;justify-content: space-between;align-items: flex-start;}
#four_area .item:nth-child(2n){flex-direction: row;}
#four_area .item:nth-child(3){transform: translateX(-105px);}
#four_area .item:nth-child(4){transform: translateX(105px);}
#four_area .item .photo{position:relative}
#four_area .item:hover .photo img{transform: scale(1.19);}
#four_area .item .photo:after{content:url(/images/44/img-a-arc.png);position: absolute;top: -5px;left: -6px;}
#four_area .item:nth-child(2n) .photo:after{transform:scaleX(-1);left: unset;right: 0px;}
#four_area .item p{background:white;width: 220px;border: 1px solid var(--primary);border-radius: 50px;padding: 8px 0;text-transform: uppercase;font-weight: 500;transform: translateY(-18px) translateX(2px);}
#four_area .item:nth-child(2n) p{transform: translateY(-18px) translateX(-9px);}

/* custom_area */
#custom_area .parallax_svg { --parallax_wave: color-mix(in srgb, var(--secondary) 80%, white); }
#custom_area .parallax_svg.top { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M1440 64V16.67c-90 24.285-138.35 6.45-203.49-2.259-59.67-7.998-119.29 10.198-179.14 5.869-78.82-5.09-135.28-41.99-217.6-1.58C797.82 34.596 776 42.875 718.33 38.326c-164.07-15.317-329.57 33.862-490.92 5.169C150.6 31.857 79.33-8.834 0 16.62V64h1440z' fill='black'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M1440 64V16.67c-90 24.285-138.35 6.45-203.49-2.259-59.67-7.998-119.29 10.198-179.14 5.869-78.82-5.09-135.28-41.99-217.6-1.58C797.82 34.596 776 42.875 718.33 38.326c-164.07-15.317-329.57 33.862-490.92 5.169C150.6 31.857 79.33-8.834 0 16.62V64h1440z' fill='black'/%3E%3C/svg%3E"); }
#custom_area .parallax_svg.bottom { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0v47.33c90-24.285 138.35-6.45 203.49 2.259 59.67 7.998 119.29-10.198 179.14-5.869 78.82 5.09 135.28 41.99 217.6 1.58C642.18 29.403 664 21.125 721.67 25.674c164.07 15.317 329.57-33.862 490.92-5.169C1289.4 32.143 1360.67 72.834 1440 47.38V0H0z' fill='black'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0v47.33c90-24.285 138.35-6.45 203.49 2.259 59.67 7.998 119.29-10.198 179.14-5.869 78.82 5.09 135.28 41.99 217.6 1.58C642.18 29.403 664 21.125 721.67 25.674c164.07 15.317 329.57-33.862 490.92-5.169C1289.4 32.143 1360.67 72.834 1440 47.38V0H0z' fill='black'/%3E%3C/svg%3E"); }
#custom_area ul li >div { margin: auto; width: 70% }
#custom_area ul li .clip { width: 250px; height: 250px; -webkit-clip-path: url(#clip_custom); clip-path: url(#clip_custom); }
#custom_area ul li h3 { margin: 10px 0 5px; font-size: 20px; }
#custom_area ul li article { font-weight: 300; font-size: 14px; overflow: hidden; margin: 10px 0 60px; height: 66px; text-align: center; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* news_area */
#news_area:after{content:url(/images/44/img-bubbles6.png);position: absolute;right: 30px;top: -160px;}
#news_area .workframe{margin-right:0;width: min(95%, 1680px);display: grid;align-items: center;justify-content: space-between;grid-template-columns: 51% 42%;}
#news_area .bg_box {order:2;background-size: cover;border-radius: 300px 0 0 300px;}
#news_area .bg_box:after{content:url(/images/44/img-n-title.png);z-index: -1;position: absolute;top: -70px;left: -60px;animation: scrollTextRotate 30s linear infinite;}
#news_area .leftBox{display:grid;gap: 50px 0;justify-items: start;}
#news_area ul{width:100%}
#news_area li .img_box , #book_area li .img_box { border-radius: 15px; background-color: #f9f9f9; }
#news_area li .info_box {padding: 35px 0;border-bottom: 1px solid #515151;display: grid;grid-template-columns: 100px 120px 1fr 50px;align-items: center;gap: 20px;position: relative;}
#news_area li .info_box:after{background: linear-gradient(90deg, #0bb4e9, #2022a7);content:'';position: absolute;width: 0;height: 1px;bottom: -1px;left: 0;}
#news_area li:hover .info_box:after{width:100%}
#news_area li .time {font-weight: 400;display: flex;flex-direction: column;align-items: center;color: #3f3f3f;font-size: 15px;line-height: 1;gap: 5px;}
#news_area li .time b{font-size: 45px;line-height: 1;}
#news_area li .more_btn {padding: 5px 15px;height: auto;font-weight: 100;font-size: 14px;z-index: 6;background: #3f3f3f;}
#news_area li .h3 {height: auto;line-height: 150%;font-size: 18px;-webkit-line-clamp: 1;}
#news_area li span{width:45px;aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;color: var(--primary);border: 1px solid var(--primary);border-radius: 50px;font-size: 22px;line-height: 1;}
#news_area li:hover span, #news_area li:hover .more_btn{background: linear-gradient(90deg, #0bb4e9, #2022a7);color:white}

/* book_area */
#book_area li h3 { margin-top: 10px; height: 30px; font-size: 18px; }

/* photo_area */
#photo_area .item {width: 260px;height: 200px;}
#photo_area .item img {height: 100%;object-fit: cover;}

@media screen and (max-width: 1680px) {
    #four_area{gap: 55px 250px;}
    #about_img >div >img {width:500px}
    #about_area{background-position: 50% -170px;}
    #four_area .item:nth-child(3){transform: translateX(-45px);}
    #four_area .item:nth-child(4){transform: translateX(45px);}
}
@media screen and (max-width: 1400px) {
    #about_area .about_sub_3{bottom: 38vw;width: 240px;}
    #about_area{background-position: 50% -100px;}
    #news_area .bg_box:after, #product_area:after, #about_area >div.pos_rel:before, #about_area:after{zoom:80%}
    #about_area:before{zoom:50%;top: 150px;}
    #product_area .product-stage{margin-top: -70px;}
}
@media screen and (max-width: 1280px) {
    #product_area .workframe{width: 100%;}
    #news_area:after{zoom:50%}
}
@media screen and (max-width: 1024px) {
    #news_area .workframe{width:90%;margin: 0 auto;display: block;}
    #news_area .bg_box, #about_area .about_sub_1, #about_area .about_sub_3, #about_area .about_sub_4{display:none;}
    #news_area .bg_box:after, #product_area:after, #about_area >div.pos_rel:before, #about_area:after{zoom: 55%;}
    section .sec-title p{width: 70%;}
    #product_area .product-item.is-active .product-circle .num{font-size:80px}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
    #four_area .item, #four_area .item:nth-child(2n){display: flex;flex-direction: column;align-items: center;gap: 15px;}
    #four_area .item:nth-child(3), #four_area .item:nth-child(4), #four_area .item:nth-child(2n) p, #four_area .item p, #four_area .item *{transform:unset}
    #four_area .item .photo:after{display:none;}
    #about_area{background-size:200%;background-position: 50% -230px;}
    #product_area .product-circle{width: 50%;}
	#product_area .product-stage { height: 430px; margin-top: 35px; }
	#product_area .product-item {min-width: 100%;transform: scale(.92);}
	#product_area .product-circle h3 { font-size: 24px; }
	#product_area .product-circle p { font-size: 16px; }
	#product_area .product-circle img { width: 66%; bottom: -30%; }
	#product_area .product-item.is-active,#product_area .slick-center { transform: scale(1); }
	#product_area .product-item.is-active .product-circle .num,#product_area .slick-center .product-circle .num { top: -55px; font-size: 72px; }
	#product_area .product-item.is-active .product-circle h3,#product_area .slick-center .product-circle h3 { font-size: 26px; }
	#product_area .product-item.is-active .product-circle p,#product_area .slick-center .product-circle p { font-size: 17px; }
	#product_area .product-item.is-active .product-circle img,#product_area .slick-center .product-circle img { width: 68%; bottom: -88px; }
	#product_area .slide-btn { width: 46px; height: 46px; font-size: 24px; }
	#product_area .slide-btn.prev {left: 10%;}
	#product_area .slide-btn.next {right: 10%;}
    #about_area:before, #about_area .about_sub_2{display:none;}
    #four_area{position:relative;gap: 30px;display: flex;justify-content: center;flex-wrap: wrap;}
}
@media screen and (max-width: 760px) {
    section .sec-title h2{font-size: 50px;}
	section { padding: 12vw 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: 70vw; }
	#product_list li .clip { height: 80vw; }
	#product_list li .info_box { width: 45vw; height: 30vw; }
}
@media screen and (max-width: 550px) {
    #news_area li .h3{order:2;grid-column: 1 / 4;}
    #news_area li .info_box{grid-template-columns: 100px 1fr 50px;}
    #four_area .item, #four_area .item:nth-child(2n){gap:0}
    #four_area{display:grid;grid-template-columns: repeat(2, 1fr);gap: 15px;}
    #four_area .item p{width:auto;padding: 10px 30px;font-size: 13px;line-height: 1.3;}
    #about_area{padding-top: 30vw;background-size: 400%;}
    #product_area:after{display:none;}
    #product_area .top-btn{position: relative;}
    section .sec-title p{width:100%;font-size: 17px;}
	#product_area .product-stage { height: 380px; margin-top: 30px; }
	#product_area .product-circle { width: 235px; height: 235px; }
	#product_area .product-circle h3 { font-size: 20px; margin-top: -25px; }
	#product_area .product-circle p { font-size: 14px; padding: 0 15px; }
	#product_area .product-circle img { width: 64%; bottom: -30%; }
	#product_area .product-item.is-active .product-circle .num,#product_area .slick-center .product-circle .num { top: -45px; font-size: 58px; }
	#product_area .product-item.is-active .product-circle h3,#product_area .slick-center .product-circle h3 { font-size: 22px; }
	#product_area .product-item.is-active .product-circle p,#product_area .slick-center .product-circle p { font-size: 14px; }
	#product_area .product-item.is-active .product-circle img,#product_area .slick-center .product-circle img { width: 64%; bottom: -70px; border-radius: 22px; }
	#product_area .slide-btn { width: 40px; height: 40px; font-size: 20px; }
	#product_area .slide-btn.prev { left: 5px; }
	#product_area .slide-btn.next { right: 5px; }
	#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; }
    #about_area #about_img{margin-top: 45px;}
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}