.section_area {padding: 5vw 0;}
.section_area .area_title {position: relative;letter-spacing: .05em;display: flex;align-items: center;font-size: 25px;padding-left: 10px;gap: 20px;}
.section_area .area_title:before {content: "";width: 15px;height: 23px;background: #dedede;transform: skewX(-35deg);}
.section_area .sub_title { font-weight: 500; font-size: 1.1em; color: var(--primary); }
.section_area .more_btn {font-weight: 500;display: inline-flex;gap: 40px;align-items: center;}
.section_area .more_btn span{font-weight:400;background-image: linear-gradient(currentColor 1px, transparent 1px);background-repeat: no-repeat;background-size: 0% 1px;background-position: 0 100%;transition: background-size .3s cubic-bezier(.32, .72, 0, 1);}
.section_area .more_btn:hover span{background-size: 100% 1px;}
.section_area .more_btn b{width:25px;aspect-ratio: 1/1;background: var(--third);border-radius: 50px;display: inline-flex;align-items: center;justify-content: center;}
.section_area .more_btn svg{width: 11px;height: 11px;fill: white;}
.section_area .list_box {margin-top: 60px;}
.section_area .list_box .item_row {margin: 0 1.5em;}
.section_area .list_box .slick-dots { position: relative; margin: 1em 0; bottom: 0; }
.section_area .titBox{display:flex;align-items: center;justify-content: space-between;border-top: 1px solid #dedede;padding-top: 25px;}

/* product_area */
#product_area{position:relative}
#product_area:before{content:url(/images/01/img-pGradient.png);position: absolute;right: 0;top: 5vw;}
#product_area .titBox{margin:0 1.5em}
#product_area .workframe{width: min(90%, 1590px);margin-left: 100px;}
#product_area li img{aspect-ratio:1/1}
#product_area li .img_box{position:relative;overflow: hidden;}
#product_area li .img_box p{position:absolute;bottom: -30%;left: 0;background: var(--third);padding: 15px 0;width: 100%;color: white;font-size: 15px;text-align: center;}
#product_area li:hover .img_box p{bottom:0}
#product_area li .info_box{margin-top:20px;}
#product_area li .info_box .h3{height:auto;-webkit-line-clamp: 2;font-size: 20px;font-weight: 600;}
#product_area li .info_box p{color:#8d8d8d;font-size: 15px;margin: 25px 0 20px;}
#product_area li .price_box{display:flex;align-items: center;gap: 10px;border-bottom: 2px solid #ececec;padding-bottom: 20px;}
#product_area li .price_box b{font-size:14px;background: #363636;padding: 3px 15px;border-radius: 3px;color: white;font-weight: 400;}
#product_area li .price_box ins{text-decoration:unset;font-size: 23px;font-weight: 800;letter-spacing: .5px;color: #313131;}
#product_area .more_btn.mo{display:none;}

/* about_area */
#about_area {display: flex;padding: 0;position: relative;justify-content: flex-end;}
#about_area:after{content:url(/images/01/img-abottom.png);position: absolute;right: 0;bottom: 75px;z-index: -4;}
#about_area .area_title:before{background: var(--third);}
#about_info{padding: 120px 170px;background: #f9f9f9;margin-bottom: 200px;width: 80%;}
#about_area .title_box {padding-bottom: 40px;}
#about_area .pageh1{line-height:1.7;font-size: 22px;margin-bottom: 10px;}
#about_area article p {margin-bottom: 60px;line-height: 2.2;letter-spacing: 2px;font-weight: 400;text-align: justify;}
#about_area .clip img {height: 100%;}
#about_area .clip {height:100%;position: relative;opacity: .7;}
#about_img{display:flex;align-items: center;position: absolute;top: 0;z-index: -1;width: 33%;left: 0;height: 100%;background: #282626;}
#about_area .decorate{width:210px;height:210px;left: calc(15% - 10px);top: 45%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:center;transform-origin:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position: absolute;z-index: 10;}
#about_area .decorate .icon_star_dark{fill: var(--third);-webkit-transform:scale(0.5);transform:scale(0.5);position:absolute;z-index:9;-webkit-animation:starAnimation 1s infinite linear;animation: starAnimation 2s infinite linear;}
@keyframes starAnimation{0%{-webkit-transform: scale(0.1);transform: scale(0.1);}50%{-webkit-transform: scale(0.25);transform: scale(0.25);}100%{-webkit-transform: scale(0.1);transform: scale(0.1);}}
#about_area .decorate .circle{width:108px;height:108px;background-color:#fff;border-radius:50%;position:absolute}
#about_area .decorate .text{background:url(/images/01/equipment_text.png) no-repeat;width:100%;height:100%;position:absolute;top:0;left:0;background-position:center;background-size:contain;animation: circleImg 10s infinite 
linear;}
@keyframes circleImg{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
#about_area .track{position:absolute;width:100vw;max-width:100%;overflow:hidden;z-index: 1;bottom: -7%;white-space:nowrap}
#about_area .track p{font-weight: 400;font-size: 250px;margin:0;text-transform:uppercase;letter-spacing: 52px;line-height:1;will-change:transform;animation: marquee 35s linear infinite;font-family: "Cormorant", serif;color: var(--secondary);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
#photo_list{display:grid;grid-template-columns: repeat(2, 1fr);gap: 40px;}
#photo_list .item_row{margin:0;background: white;border-radius: 10px;padding: 25px 30px;box-shadow: 10px 10px 35px 10px rgb(0 0 0 / 10%);display: grid;grid-template-columns: 100px 1fr;gap: 30px;align-items: center;}
#photo_list .item_row .img_box{background:#282626;border-radius: 50%;aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;}
#photo_list .item_row:hover .img_box{background:var(--third)}
#photo_list .item_row .img_box img{width:40px;-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);aspect-ratio: 1/1;object-fit: contain;}
#photo_list .item_row p{color:#888;font-size: 15px;margin-top: 5px;}

/* process_area */
#process_area{margin-top: -7vw;padding-top: 0;}
#process_area .workframe{width:min(90%, 1500px)}
#process_area .area_title{padding:0;color: white;}
#process_area .area_title:before{background: #dedede;margin-top: -42px;}
#process_area .stepbox{padding-left: 10%;position: relative;margin-top: 130px;}
#process_area .stepbox .box{display:grid;grid-template-columns: 610px repeat(2, 1fr);}
#process_area .stepbox .slick-list{overflow:unset}
#process_area .stepbox .btn{position:absolute;padding: 0;display: flex;flex-direction: column;align-items: center;bottom: 0;left: 0;gap: 15px;z-index: 2;}
#process_area .stepbox .btn a{width: 70px;aspect-ratio: 1/1;background: #f9f9f9;border-radius: 50%;text-align: center;line-height: 70px;}
#process_area .stepbox .btn a:hover{background:var(--g_charcoal)}
#process_area .stepbox .btn a:hover svg{fill:white;}
#process_area .stepbox .btn svg{width: 15px;height: 15px;fill: var(--g_charcoal);}
#process_area .stepbox .btn #process_prev svg{transform:scaleX(-1);}
#process_area .stepbox .infobox {display: flex;justify-content: flex-end;position: relative;align-items: center;}
#process_area .stepbox .infobox:not(:last-child):after{content:url(/images/01/img-processline.png);right: -180px;position: absolute;}
#process_area .stepbox .infobox:not(.is-active):after{filter: saturate(0%);opacity:.3}
#process_area .stepbox .infobox .info{position:absolute;left: 0;width: min(90%, 300px);}
#process_area .stepbox .img{background:#f9f9f9;width: 150px;aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;border-radius: 50%;position: relative;order: 2;box-shadow: 20px 20px 35px rgb(0 0 0 / 10%);}
#process_area .stepbox .img img{width:80px;aspect-ratio: 1/1;object-fit: contain;opacity: .2;}
#process_area .stepbox .is-active .img img{opacity:1}
#process_area .stepbox .img b{position:absolute;font-size: 170px;z-index: -1;bottom: 0;left: -15px;color: #e5e5e5;font-style: italic;font-family: "Arimo", sans-serif;font-weight: 500;}
#process_area .stepbox .is-active .img b{color: var(--third);}
#process_area .stepbox .title{font-size:25px;font-weight: 700;color: #313131;}
#process_area .stepbox p{font-size:18px;text-align: justify;}

@media screen and (min-width: 1161px){
	#photo_area .item_row:hover { border-color: var(--primary); }
}
@media screen and (max-width: 1680px){
    #about_area .decorate{left: calc(15% - 20px);}
}
@media screen and (max-width: 1440px){
    #about_area .decorate{left: calc(15% - 35px);}
    #product_area .workframe{width: min(90%, 1100px);}
}
@media screen and (max-width: 1280px){
    #process_area{margin-top: -11vw;}
    #about_img{ width: 40%;}
    #about_area .decorate{left: calc(10% - 30px);}
    #product_area:before{display:none;}
    #product_area .workframe{margin:0 auto;width: 90%;}
    #about_info{padding: 110px 90px;}
    #process_area .stepbox .box{display: grid;grid-template-columns: 500px repeat(2, 1fr);    }
}
@media screen and (max-width: 1024px){
    #process_area .stepbox .btn{display:flex;flex-direction: row;top: -120%;bottom: unset;left: unset;right: 20%;}
    #process_area .stepbox .infobox:after{display:none;}
    .section_area{padding:10vw 0}
    #photo_list{grid-template-columns:1fr}
    #about_img{ width: 50%;}
    #process_area .stepbox .box{display: grid;grid-template-columns: 400px repeat(2, 1fr);}
    #process_area .stepbox .infobox .info{width: min(90%, 190px);}
    #process_area .stepbox{padding:0}
}
@media screen and (max-width: 768px){
    #process_area .stepbox{margin-top: 160px;}
    #process_area .stepbox .infobox .info{position: relative;width: auto;}
    #process_area .stepbox .infobox{display:grid;justify-content: space-between;align-items: center;grid-template-columns: 50% 30%;}
    #process_area{margin-top: -17vw;}
    #about_img, #about_info{width:100%}
    #about_area .decorate{display:none;}
    #process_area .stepbox .btn{right: 10%;top: -150%;}
    #process_area .stepbox .box{grid-template-columns:1fr}
    #process_area .stepbox .infobox.is-inactive{display:none;}
}
@media screen and (max-width: 680px){
    #process_area .stepbox .box{display:block;}
    #process_area .stepbox .infobox{display:flex;flex-direction: column-reverse;align-items: center;width: 80%;margin: 0 auto 40px;gap: 30px;}
    #process_area .stepbox{display:flex;flex-direction: column-reverse;align-items: center;}
    #process_area .stepbox .btn{position:relative;right: 0;top: unset;}
    #process_area{margin-top: -28vw;}
    #photo_list .item_row{grid-template-columns: 70px 1fr;align-items: start;}
    #about_info{padding: 60px 7%;}
    #product_area .more_btn.mo{display: flex;background: var(--third);border-radius: 5px;padding: 13px 15px;width: 240px;margin: 0 auto;}
    #product_area .more_btn.mo b{background:white }
    #product_area .more_btn.mo svg{fill:var(--third)}
    #product_area .more_btn.mo span{color:white;}
    #product_list{margin-bottom:30px}
    .section_area .area_title{font-size: 22px;}
    #product_area .titBox{margin:0;padding: 35px 1.5em 0;}
    #product_area .titBox .more_btn{display:none;}
    #product_area .workframe{width:100%}
    #about_img{height:50%;top: unset;bottom: 0;}
    #process_area .stepbox .title{text-align:center;font-size: 22px;}
    #process_area .stepbox p{text-align:center;font-size: 16px;}
}