/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {font-size: max(5.5 * (1vw + 1vh) / 2, 35px);font-family: "Nunito Sans", serif;text-transform: uppercase;background: linear-gradient(90deg, var(--primary), var(--secondary));background-clip: text;-webkit-background-clip: text;color: transparent;font-style: unset;font-weight: 700;line-height: 1.2;display: block;}
section .h3title_box {padding-bottom: 3vw;font-size: 32px;letter-spacing: 5px;font-weight: 500;color: #393535;}
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%); }

/* research */
#research{background: linear-gradient(90deg, var(--primary), var(--secondary));position: relative;}
#research:after{content:'';background-image: url(/images/44/researchBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;position: absolute;width: 50%;height: 100%;top: 0;right: 0;}
#research .workframe {width:min(90%, 1280px);display: grid;grid-template-columns: 50% 50%;}
#research .leftBox{padding: 50px 20px 50px 0;}
#research .leftBox h2, #research .rightBox .phaseWrap h4, #research .rightBox .indication h4{font-size: 22px;line-height: 1.5;letter-spacing: 1px;font-weight: 500;color: #fff;padding-bottom: 20px;}

#research .leftBox .tickListBox ul{list-style-type: none;padding-left: 30px;border-top: 1px solid rgba(255, 255, 255, 0.3);padding-top: 30px;}
#research .leftBox .tickListBox li{font-size: 15px;line-height: 1.5;padding: 7px 0;position: relative;font-weight: 300;color: #fff;}
#research .leftBox .tickListBox li::before{content:'';width: 20px;height: 20px;background-image: url(/images/44/ticklist_deco.png);position: absolute;top: 9px;left: -30px;}
#research .rightBox{display:grid;grid-template-columns: 50% 50%;position: relative;z-index: 2;}
#research .rightBox .indication{padding: 50px 30px;}
#research .rightBox .indication ul{border-top: 1px solid rgba(255, 255, 255, 0.3);}
#research .rightBox .indication li{display: flex;flex-wrap: wrap;align-content: center;height: 65px;color: #fff;border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
#research .rightBox .indication li b{font-size: 16px;line-height: 1.5625;letter-spacing: 1px;font-weight: 300;color: #fff;}
#research .rightBox .indication li em{font-size: 14px;line-height: 1.43;font-weight: 400;letter-spacing: 0;font-style: unset;text-transform: capitalize;font-family: "Kanit", serif;font-weight: 200;}
#research .rightBox .phaseWrap{padding: 50px 30px;background: var(--white);}
#research .rightBox .phaseWrap .infoo{position:relative;}
#research .rightBox .phaseWrap .infoo:after{content:'';width: 1px;height: 100%;background: #f1f1f1;position: absolute;top: 0;left: 8px;}
#research .rightBox .phaseWrap .tt{display:grid;z-index: 2;grid-template-columns: 30px 1fr;margin: 12px 0;align-items: center;}
#research .rightBox .phaseWrap .tt h3{font-size: 15px;line-height: 1.6;letter-spacing: 1px;color: #4b4b4b;font-weight: 400;}
#research .rightBox .phaseWrap h4{color:var(--primary)}

/* particle-canvas */
#particle-canvas{width:100%;height: 100%;position: absolute !important;bottom: 0;left: 0;z-index: 0;opacity: .25;z-index: -1;}
#particle-canvas canvas{width:100%;height:100%;}

/* product_sub_list */
#product_sub_list >div { margin: auto; width: 100%; }
#product_sub_list li {width: 210px;display: block;}
#product_sub_list li .clip { height: 210px; -webkit-clip-path: url(#clip_sub_product); clip-path: url(#clip_sub_product); }
#product_sub_list li h3 { font-weight: 300; }

/* product_list */
#product_list { width: 600px; }
#product_list li .clip { height: 690px; -webkit-clip-path: url(#clip_product); clip-path: url(#clip_product); }
#product_list li .info_box { width: 367px; height: 228px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 367 228'%3E%3Cpath d='M367.78 126C374 16.84 244.78 11.74 169 1.62c-30.92-4.22-65.18-.49-89.25 18.28-10.07 8.27-21.49 9.51-30.69 14.7-10.8 7-24 26.55-31.88 38.77-20.79 30.78-25.12 73.93 3.58 101.93 42.82 40.82 125.08 59.41 182.75 51.15 18.44-2.61 31-8 48.42-10.85 17.13-1.86 30.89-3.56 48.43-10.85 33.48-12.81 54.43-40.22 67.42-78.75z' fill='%23f4ece5'/%3E%3C/svg%3E") no-repeat center / 100%; bottom: 0; left: 0; }
#product_list li .info_box >div { margin: auto; width: 80%; }
#product_list li .info_box h3 { height: auto; font-size: 20px; }
#product_list li .info_box p { margin-right: 10px; font-weight: 300; }
#product_list li .info_box p:first-letter { margin-right: 2px; font-size: 12px; }

/* about_area */
#about_area{position:relative;padding: 3vw 0;}
#about_area .fixTxt{position:absolute;z-index: 5;top: -110px;left: 40px;}
#about_area .workframe {margin: 0 0 0 auto;width: min(90%, 1500px);display: grid;grid-template-columns: 35% 55%;justify-content: space-between;}
#about_area .h3title_box{padding:0;}
#youtube{background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#youtube .UTwo iframe{position:absolute;top:0;left:0;width:100%;height:100%}
#about_area h2 {font-size: 22px;color: #655d5d;font-weight: 500;margin-bottom: 30px;}
#about_area article {margin-bottom: 30px;line-height: 210%;letter-spacing: 2px;font-weight: 400;width: 100%;}
#about_area article .tt{margin-bottom:50px;}
#about_area .clip {-webkit-clip-path: url(#clip_about);clip-path: url(#clip_about);}
#about_area .more_btn{padding: 12px 15px 12px 50px;display: inline-flex;align-items: center;background: var(--complement);text-align: left;}
#about_area .more_btn b{width:80px;height: 80px;background: var(--white);display: inline-flex;align-items: center;justify-content: center;border-radius: 50px;margin-left: 70px;margin-right: 0;}
#about_area .more_btn b svg{width: 18px;height: 27px;fill: var(--complement);}

/* fakeNumber */
#fakeNumber{padding: 0;position: relative;}
#fakeNumber ul{padding: 65px 250px 65px 360px;background: linear-gradient(90deg, var(--primary), var(--secondary));grid-template-columns: repeat(3, 1fr);display: grid;justify-content: center;width: 46%;}
#fakeNumber li{padding: 0 30px;display: inline-flex;align-items: center;justify-content: center;position: relative;}
#fakeNumber li .eva{display:flex;flex-direction: column;align-items: center;}
#fakeNumber li h2{display: flex;font-size: 18px;color: #fff;align-items: flex-end;font-weight: 300;}
#fakeNumber li h2 b{color: #fff;font-size: max(5.6 * (1vw + 1vh) / 2, 50px);font-weight: 700;line-height: 85%;margin-right: 10px;font-family: "Nunito Sans", serif;}
#fakeNumber li p{color: #fff;font-size: 20px;margin-top: 5px;letter-spacing: 1px;font-weight: 400;}

/* custom_area */
#custom_area .parallax_svg.top { background-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='%23E2CEBC'/%3E%3C/svg%3E"); }
#custom_area .parallax_svg.bottom { background-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='%23E2CEBC'/%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 .fixTxt{position:absolute;top: -180px;right: 130px;z-index: 5;}
#news_area .bg_box {position:absolute;right: 0;width: calc(20% + 41px);left: unset;}
#news_area .bg_box:before{display:none;}
#news_area .bg_box img{height: 100%;animation: moveObject 50s linear infinite;width: 100%;object-fit: cover;}
@keyframes moveObject{0%{object-position:0% 50%}50%{object-position:100% 50%}100%{object-position:0% 50%}}
#news_area .workframe{width: min(70%, 1200px);margin-left: 9%;}
#news_area .titleBox{position:relative;}
#news_area .more_btn{position:absolute;bottom: 3vw;right: 0;}
#news_area .newslist {display: flex;justify-content: flex-end;align-items: center;margin: 2vw 0;}
#news_area .newslist .one{position:absolute;left: 0;width: 48%;display: flex;align-items: center;}
#news_area .newslist .one:after{content:url(/images/44/linrr.png);position: absolute;right: -25%;}
#news_area .newslist .one li{display:block;}
#news_area .newslist .one li:not(:first-child) .img_box {display:none;}
#news_area .newslist .one .info_box{display:none;}
#runn{width: 35%;}
#runn li .img_box{display:none;}
#runn li{margin: 60px 0;display: flex;align-items: center;}
#runn li:before{content:'';width: 20px;aspect-ratio: 1/1;border-radius: 50px;left: -101px;position: absolute;border: 1px solid var(--primary);opacity: 0;}
#runn li:hover:before{opacity:1}
#runn li:after{content:'';width: 10px;aspect-ratio: 1/1;background: #e5e5e5;border-radius: 50px;left: -95px;position: absolute;}
#runn li:hover:after{background:var(--primary)}
#runn li:nth-child(2){margin-left: 30px;}
#news_area li .img_box img {aspect-ratio: 1/1;border-radius: 500px;}
#news_area li .img_box font , #news_area li .img_box font *{line-height: 1.1;color: #fff;text-transform: uppercase;font-weight: 400;}
#news_area li .img_box font{font-family: "Open Sans", serif;font-size: 26px;display: inline-flex;align-items: center;justify-content: center;background: linear-gradient(90deg, var(--primary), var(--secondary));flex-direction: column;width: 70px;aspect-ratio: 1/1;position: absolute;bottom: 0;left: 75px;padding: 20px;border-radius: 58px;font-weight: 600;}
#news_area li .img_box font b{font-family: "Open Sans", serif;font-size: 22px;}
#news_area li .info_box {display: flex;align-items: center;flex-wrap: wrap;}
#news_area li .time {width: 105px;font-weight: 500;font-size: 16px;color: var(--info);}
#news_area li .more_btn {background: #e6e6e6;margin-left: 10px;padding: 2px 15px;max-width: calc(100% - 105px);font-weight: 400;font-size: 13px;z-index: 6;position: relative;bottom: unset;right: unset;border-radius: 0;color: #2e2b2b;height: auto;display: inline-block;}
#news_area li h3 {margin-top: 10px;height: 60px;line-height: 150%;font-size: 20px;-webkit-line-clamp: 2;width: 100%;color: #393535;font-weight: 500;}
#news_area li:hover h3{background: linear-gradient(90deg, var(--primary), var(--secondary));background-clip: text;-webkit-background-clip: text;color: transparent;}

/* book_area */
#book_area .bg_box {z-index:-1}
#book_area .workframe{width:min(90%, 1280px)}
#book_area li{margin: 0 20px;}
#book_area li img{aspect-ratio:2.5 / 1.9;object-fit: cover;}
#book_area li h3 {margin: 20px 0;height: auto;font-size: 20px;color: #393535;font-weight: 500;}
#book_area li:hover h3{background: linear-gradient(90deg, var(--primary), var(--secondary));background-clip: text;-webkit-background-clip: text;color: transparent;}
#book_area li .infoo{display:grid;grid-template-columns: 1fr 60px;align-items: center;gap: 30px;}
#book_area li .infoo article{height:auto;-webkit-line-clamp: 2;color: #393535;line-height: 1.8;font-weight: 300;}
#book_area li .infoo b{width:60px;aspect-ratio:1/1;background: linear-gradient(90deg, var(--primary), var(--secondary));display: inline-flex;align-items: center;justify-content: center;border-radius: 50px;}
#book_area li:hover .infoo b{    background: linear-gradient(90deg, var(--primary), var(--primary));}
#book_area li .infoo b svg{width:20px;height: 20px;fill: #fff;} 

/* photo_area */
#photo_area .fixTxt{position:absolute;z-index: 5;top: -110px;left: 0;}
#photo_area .workframe{display:grid;grid-template-columns: 40% 55%;width: min(90%, 1500px);align-items: center;justify-content: space-between;}
#photo_area .item{margin: 0 10px;}
#particle-canvas-photo{width:100%;height: 100%;position: absolute !important;bottom: 0;left: 0;z-index: 0;opacity: .25;z-index: -1;}
#particle-canvas-photo canvas{width:100%;height:100%;}

/* contact_area */
#contact_area{background: linear-gradient(145deg, #dfdfdf, var(--secondary));padding: 2.5vw 0;}
#contact_area .workframe{width: min(90%, 1100px);display: flex;align-items: center;justify-content: center;}
#contact_area .photo{width: 40%;margin-right: 5vw;}
#contact_area .info *{color: #2b2929;}
#contact_area .info h3{padding-bottom: 1vw;}
#contact_area .info p{margin-bottom:2vw}
#contact_area .info a{background: linear-gradient(90deg, var(--complement), #cb7304);color: var(--white);padding: 15px 30px;margin-right: 10px;display: inline-block;}

@media screen and (max-width: 1680px) {
	#about_area .fixTxt{left: -80px;top: -200px;}
	#news_area .bg_box{width: calc(15% + 37px);}
}
@media screen and (max-width: 1460px) {
	#photo_area .fixTxt{left: -150px;}
	#runn li:before{left: -90px;}
	#runn li:after{left: -84px;}
	#news_area .bg_box{width: calc(11% + 19px);}
	#fakeNumber ul{padding: 65px 200px 65px 250px;width: 55%;}
	#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; }
}
@media screen and (max-width: 1280px) {
	#photo_area .fixTxt{left: -80px;top: -50px;}
	#runn li:before{left: -85px;}
	#runn li:after{left: -79px;}
	#news_area .bg_box{width: calc(8% + 16px);}
	#news_area .fixTxt{top: -130px;right: -100px;}
	#about_area .fixTxt{left: -50px;top: -130px;}
	#about_area .fixTxt img, #news_area .fixTxt img, #photo_area .fixTxt img{width: 70%;}
}
@media screen and (max-width: 1024px) {
	#runn li{margin: 30px 0;}
	#news_area .newslist .one:after{zoom: 70%;}
	#news_area .newslist .one{width: 40%;}
	#runn{width: 45%;}
	#news_area .workframe{width:90%;margin: 0 auto;}
	#news_area .bg_box{display:none;}
	#fakeNumber ul{padding: 70px 0;width: 100%;}
	#about_area .workframe{grid-template-columns:1fr;margin: 0 auto;}
	#youtube{aspect-ratio: 5/3;}
	#research .rightBox .indication{padding: 50px 70px 0 0;}
	#research:after{height: 64%;width: 100%;top: unset;bottom: 0;}
	#research .leftBox{padding: 50px 0 20px;}
	#research .workframe{grid-template-columns:1fr}
	#product_list { margin: auto; }
}
@media screen and (max-width: 980px) {
	#photo_area .workframe{display:block;}
	#runn li{display:flex;flex-direction: column;width: 90%;margin: 0 auto;}
	#runn{width:100%;}
	#runn li .img_box{display:block;width: 80%;margin: 0 auto 31px;}
	#runn li:not(:first-child), #news_area li .img_box font{display:none;}
	#news_area .newslist .one, #runn li:before, #runn li:after{display:none;}
	#news_area .fixTxt{top: -60px;}
	#about_area .fixTxt{top: -190px;}
	#product_list { width: 500px; }
	#product_list li .clip { height: 590px; }
	#about_area #about_info { margin-bottom: 8vw; }
	#about_area .about_sub_2 { top: auto; bottom: 35vw; width: 35vw; }
	#about_area .about_sub_3 { width: 29vw; left: 10vw; }
}
@media screen and (max-width: 760px) {
	#about_area .more_btn b{margin-left: 10px;}
	#contact_area .info p{font-size: 14px;margin: 10px 0 30px;}
	#contact_area .info, #contact_area .info *{text-align:center;}
	#contact_area .photo{margin-right:0;margin-bottom: 30px;}
	#contact_area .workframe{display: flex;flex-direction: column;align-items: center;}
	section .h3title_box{font-size:26px}
	#news_area .fixTxt{top: -110px;}
	#fakeNumber li{padding: 0;}
	#fakeNumber li p{font-size: 17px;}
	#fakeNumber ul{grid-template-columns: repeat(2, 1fr);padding: 40px 0;gap: 40px;}
	#about_area .more_btn{padding: 12px 15px 12px 30px;}
	#research{padding-bottom: 20px;}
	#research .rightBox .indication li{display:flex;flex-direction: column;height: auto;align-items: flex-start;align-content: flex-start;padding: 20px 0;}
	#research .rightBox .indication{padding: 30px 0;}
	#research .rightBox{grid-template-columns:1fr}
	#research:after, #about_area .fixTxt, #news_area .more_btn, #photo_area .fixTxt{display:none;}
	section, #about_area, #contact_area {padding: 8vw 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) {
	#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_img { width: 80vw; }
	#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; }
}