#wrap { z-index: 5; }

/* section */
section { padding: 5vw 0 ; }
section >* { z-index: 3; }
section .entitle_box {padding-bottom: 20px;font-weight: 500;font-size: 55px;letter-spacing: 1px;line-height: 1.41;font-family: "Arimo", sans-serif;}
section .title_box {padding-bottom: 3vw;font-size: 26px;}
section .title_box:first-letter{color:var(--primary)}
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%); }

/* product_area */
#product_area{margin-top: 4vw;}
#product_area .allwrap{position:absolute;right:0;bottom: 30%;letter-spacing:12px;width:100%;z-index: -1;}
#product_area .allwrap #canvas-container{position:absolute;bottom: 500px;}
#product_area .titBox{width:min(90%, 1400px);margin: 0 auto 50px;position: relative;display: flex;flex-direction: column;justify-content: center;}
#product_area .entitle_box{padding-bottom:0}
#product_area .entitle_box:before {content:'';display: block;width: 70px;height: 5px;background: var(--primary);margin-bottom: 20px;}
#product_area .more_btn {position:absolute;right: 0;}
#product_list li{margin: 0 35px;}
#product_list li img{aspect-ratio: 13/10;object-fit: contain;}
#product_list li .clip:after{position:absolute;display:block;top: 0;right:0;content:"";background: var(--triadic1);z-index:-1;height: 100%;width: 100%;opacity: .75;border-radius: 60% 40% 45% 55% / 65% 50% 50% 35%;animation: ani_round 5s infinite;}
@keyframes ani_round{0%{border-radius:60% 40% 45% 55% / 65% 50% 50% 35%;}25%{border-radius:58% 42% 75% 25% / 76% 46% 54% 24%;}50%{border-radius:50% 50% 33% 67% / 55% 27% 73% 45%;}75%{border-radius:33% 67% 58% 42% / 63% 68% 32% 37%;}}
#product_list li .info_box{display:flex;flex-direction: column;justify-content: center;position: relative;margin-top: 20px;}
#product_list li .info_box .h3{width:calc(100% - 50px);height: auto;font-size: 20px;font-weight: 500;letter-spacing: 1px;}
#product_list li .info_box p{width: calc(100% - 60px);height: auto;-webkit-line-clamp: 2;font-size: 14px;color: #333;font-weight: 300;margin-top: 5px;text-align: justify;}
#product_list li .info_box .infeeright{position: absolute;right: 0;}
#product_list li svg{padding:10px;border-radius:555px;background:var(--primary);fill:#ffffff;width: 12px;aspect-ratio: 1/1;}
#product_list li:hover svg{animation: rotateAnimation 1s infinite;background: var(--triadic2);}
@keyframes rotateAnimation{0%{transform:rotate(0deg);}100%{transform:rotate(90deg);}}

/* about_area */
#about_area {z-index: 5;padding-bottom: 0;}
#about_area:before{content:'';position: absolute;width: 50%;height: 100%;background: var(--white);bottom: 0;z-index: -1;left: 0;}
#about_area:after{content:'';position: absolute;width: 50%;height: 1px;background: #c1c1c1;opacity: .2;bottom: 160px;z-index: -1;right: 0;}
#about_area .workframe {width: min(90%, 1440px);display: grid;grid-template-columns: 40% 45%;align-items: start;justify-content: space-between;}
#about_area .title_box {padding-bottom: 80px;}
#about_area h2 { font-size: 45px; font-style: italic; }
#about_area article p {margin-bottom: 55px;line-height: 2.2;font-weight: 400;width: 80%;text-align: justify;}
#about_area .cilp {width: 100%;margin: 0;-webkit-transition: all 0s ease-in-out;}
#about_area .cilp img{aspect-ratio:4/3;object-fit: cover;}
#about_area .cilp .one{top:0;left: 0;width: 90px;animation: floatIcon 5s ease-in-out infinite;}
#about_area .cilp .two{top: 212px;right: 100px;width: 65px;animation: floatIcon 1.5s ease-in-out infinite;}
#about_area .cilp .three{top: -50px;right: -20px;width: 65px;animation: floatIcon 3s ease-in-out infinite;}
@keyframes floatIcon{0%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-8px) rotate(1deg);}100%{transform:translateY(0) rotate(0deg);}}
#about_info{margin-bottom:80px;position: relative;}
#about_info .joinline {right: -90px;animation: rotateAnimationJ 3s infinite;transform-origin: left bottom;top: 40px;width: 140px;}
@keyframes rotateAnimationJ{0%{transform:rotate(0deg);}50%{transform:rotate(10deg);}100%{transform:rotate(0deg);}}
#about_info .pageh1{font-size:22px;font-weight: 500;display: block;line-height: 2;margin-bottom: 15px;}
#fakeNumber{display:grid;grid-template-columns: repeat(2, 1fr);margin-top: 110px;width: 90%;}
#fakeNumber .eva p{font-size:17px;margin-bottom: 5px;}
#fakeNumber .eva p:after{content:'';display: block;width: 35px;height: 2px;background: #acb2af;margin: 20px 0 21px;}
#fakeNumber .eva >div{font-size:17px;display: flex;align-items: flex-start;position: relative;}
#fakeNumber .eva b{font-size: 60px;color: var(--primary);font-weight: 500;line-height: 1;font-family: "Arimo", sans-serif;}
#fakeNumber .eva font{display: flex;flex-direction: column;align-items: flex-start;margin-left: 10px;}
#fakeNumber .eva font span{font-size:17px}

/* custom_area */
#custom_area{background: var(--white);position: relative;}
#custom_area:before{content:url(/images/44/img-money3.png);position: absolute;top: -30px;right: 5%;animation: floatIcon 3s ease-in-out infinite;}
#custom_area:after{content:url(/images/44/img-money1.png);position: absolute;bottom: -30px;left: 5%;animation: floatIcon 3s ease-in-out infinite;zoom: 85%;}
#custom_area .h2_title_box {text-align:center;color: #444;font-size: 32px;letter-spacing: 5px;font-weight: 600;}
#custom_area ul{display: flex;justify-content: center;margin: 45px 0 70px;flex-wrap: wrap;}
#custom_area ul li{width: calc((100%/5) - 40px);margin: 0 15px;border: 5px solid #fff;box-shadow: 0px 0px 0px 1px #fbb03b;overflow: hidden;position: relative;}
#custom_area ul li:after{content:'';background-image: url(/images/44/img-bgg.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;position: absolute;bottom: -55px;width: 100%;height: 35%;}
#custom_area ul li >div {margin: 30px auto 25px;width: 75%;position: relative;z-index: 2;}
#custom_area ul li .h3 {margin: 0 0 10px;font-size: 20px;position: relative;display: flex;align-items: center;justify-content: center;color: white;letter-spacing: 5px;}
#custom_area ul li .h3:after{content:'';width: 43px;aspect-ratio: 1/1;position: absolute;background: var(--complement);border-radius: 50px;z-index: -1;left: 6px;box-shadow: 27px 0 var(--complement), 52px 0 var(--complement), 77px 0 var(--complement), 102px 0 var(--complement), 126px 0 var(--complement);}
#custom_area ul li .clip{text-align:center;margin: 35px auto 25px;}
#custom_area ul li .clip img{width: 60%;}
#custom_area ul li:hover .clip{-webkit-animation: flipInX 1.5s both;1s;-webkit-animation-duration: 1s;}
@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0;}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in;}60%{transform:perspective(400px) rotateX(10deg);opacity:1;}80%{transform:perspective(400px) rotateX(-5deg);}to{transform:perspective(400px);}}
#custom_area ul li article {font-weight: 400;font-size: 17px;overflow: hidden;margin: 20px 0 0;height: auto;text-align: center;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;color: #333;line-height: 1.5;}
#custom_area .bottom {text-align:center;}
#custom_area .bottom p{text-align: center;font-size: 22px;margin-bottom: 30px;letter-spacing: 2px;}
#custom_area .bottom a{background: #00b93f;padding: 20px 40px;color: #fff;font-size: 17px;font-weight: 500;}
#custom_area .bottom a svg{width:23px;height: 23px;fill: #fff;margin-right: 10px;}

/* news_area */
#news_area{position: relative;}
#news_area:before{content:url(/images/44/img-people1.svg);width: 370px;position: absolute;right: -20px;top: -20%;animation-name: people1;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
@keyframes people1{0%{transform-origin:right bottom;transform:rotate(-3deg);}100%{transform-origin:right bottom;transform:rotate(3deg);}}
#news_area .workframe{width: min(90vw, 1400px);display: grid;grid-template-columns: 8% 90%;justify-content: space-between;align-items: end;}
#news_area .titleBox{display:flex;flex-direction: column;align-items: center;gap: 180px;}
#news_area .titleBox .h2_title{writing-mode: vertical-lr;color: #444;font-size: 32px;letter-spacing: 5px;font-weight: 600;}
#news_area .titleBox .btn{display:flex;flex-direction: column;gap: 10px;}
#news_area .titleBox a{width: 50px;aspect-ratio: 1/1;border-radius: 50px;background: var(--secondary);display: flex !important;align-items: center;justify-content: center;}
#news_area .titleBox svg{width:22px;height: 22px;fill: white;}
#news_area .titleBox a#new_next svg{transform:scaleY(-1);}

/* news_list */
#news_list{margin:0}
#news_list .bottom {display: flex;align-items: center;justify-content: space-between;}
#news_list .linen{display:block;w;width: 80%;height: 4px;background: #faf8f4;position: relative;}
#news_list .linen:before{content:'';position: absolute;top: 0;left: 0;height: 4px;background: var(--primary);width: 46%;}
#news_list .info_box { margin-top: .5em; }
#news_list .info_box .time { font-size: .9em; color: var(--g_500); }
#news_list .info_box h3 { margin: .2em 0 .5em; }
#news_list .info_box article { margin-bottom: .5em; height: 3.2em; font-size: .9em; color: var(--g_600); -webkit-line-clamp: 2; }
#news_list ul{margin-bottom: 40px;}
#news_list li{border: 1px solid #dbdbdb;margin: 0 15px;padding: 40px;border-radius: 30px;}
#news_list li:nth-child(even){margin-top:35px;}
#news_list li font{font-family: "Arimo", sans-serif;font-size: 15px;color: var(--primary);font-weight: 600;display: flex;align-items: center;gap: 10px;position: relative;}
#news_list li font b{font-family: "Arimo", sans-serif;color: #303231;font-size: 15px;}
#news_list li font a{color:#747a77;font-weight: 400;border: 1px solid #c6c6c6;display: inline-block;height: auto;font-size: 14px;padding: 3px 20px;position: absolute;right: 0;font-family: var(--font-family), sans-serif;}
#news_list li .h3{font-size: 23px;-webkit-line-clamp: 2;height: auto;line-height: 1.6;margin: 15px 0;color: #292b2a;font-weight: 500;}
#news_list li .item_row >span{display: block;width: 22px;height: 4px;background: var(--primary);margin: 20px 0;}
#news_list li article{-webkit-line-clamp:3;height: auto;font-size: 15px;text-align: justify;margin-bottom: 50px;font-weight: 300;}
#news_list li p{display:flex;align-items: center;gap: 60px;color: var(--primary);}
#news_list li p span{display:inline-block;width: 7px;aspect-ratio: 1/1;background: linear-gradient(90deg, var(--primary), var(--secondary));border-radius: 50px;}
#news_list li:hover p span{border:1px solid var(--primary);background:none}

/* 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: 1460px) {
    #news_area:before{top: -35%;right: -60px;width: 320px;}
    #custom_area ul li .h3:after{left: -6px;}
    #about_area article p{width:100%}
    #about_info .joinline{left: -32%;top: 110px;}
}
@media screen and (max-width: 1366px) {
    #custom_area ul li .h3:after{left: -10px;}
}
@media screen and (max-width: 1280px) {
    #custom_area ul li .h3:after{left: 40px;}
    #custom_area ul{gap:30px 0}
    #custom_area ul li{width: calc((100% / 3) - 40px);}
}
@media screen and (max-width: 1024px) {
    #custom_area ul li .h3:after{left: 13px;}
    #about_area:after{width:100%}
    #about_area:before{height: 40%;width: 100%;top: 0;}
    #about_area .cilp{margin-bottom:30px;}
    #about_area .workframe{grid-template-columns:1fr}
    #about_area .cilp .one{left: -70px;}
    #about_info .joinline{left: -42%;}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
    #news_area:before{display:none;}
    #custom_area ul li .h3:after{left: 28px;}
    #custom_area ul li{width: calc((100% / 2) - 40px);}
    #product_area{margin:0}
    #about_area:after{display:none;}
	section { padding: 12vw 0 ; }
}
@media screen and (max-width: 760px) {
    #about_area .workframe{display:block;}
	section .clip img{height: auto;}
    #news_list li font a{padding: 3px 13px;font-size: 13px;}
    #news_list li font, #news_list li font b{font-size: 13px;}
    #news_list li font{gap: 0;display: flex;flex-direction: column;align-items: flex-start;}
    #news_list li .item_row{margin: 0 1em;}
    #news_list .bottom{justify-content: center;}
    #news_list .linen{display:none;}
    #news_list{margin-top: 8vw;}
    #news_list li:nth-child(even){margin-top:0}
    #news_area .titleBox .h2_title{writing-mode: unset;}
    #news_area .titleBox .btn{display:none;}
    #news_area .workframe{display:block}
    #custom_area:after{zoom:60%}
    #custom_area ul li .h3:after{left: 38px;}
    #custom_area ul li{width: calc((100% / 1) - 40px);}
    #product_area .more_btn{position:relative;margin-top: 20px;}
    section .title_box{font-size: 22px;}
    #about_info{margin:0}
    #fakeNumber{width:100%;margin-top: 60px;}
    #fakeNumber .eva font span{font-size:14px;}
    #fakeNumber .eva b{font-size: 40px;}
    #about_info .joinline{display:none;}
    #about_area .cilp .two{right: -90px;}
    #about_area:before{height:30%}
    section .entitle_box{font-size: 40px;}
}
@media screen and (max-width: 550px) {
	#about_area #about_img { width: 100%; }
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}