@charset "utf-8";

/**/
#procedure{}
#procedure .inner{max-width:1920px;margin:0 auto;width: 100%;}

/**/
#procedure .visual{position:relative;width:100%;height:auto;aspect-ratio:1920/900;min-height:390px;background:#050505;overflow:hidden;}
#procedure .visual .text{position:absolute;z-index:5;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding: 0 0 168px 0;}
#procedure .visual .text .eng{line-height:1;font-size:260px;font-weight:700;font-family: 'Cormorant Garamond', sans-serif;font-style:italic;color:#ffffff;opacity:0.05;margin:0 0 -92px 0;pointer-events:none;box-shadow: 2px 2px 4px 0 #00000029 inset, 1px 1px 2px 0 #0000001A inset;text-transform:capitalize;letter-spacing:5px;}
#procedure .visual .text .tit{line-height:92px;font-size:66px;font-weight:300;color:#ffffff;font-family:'Bookk', sans-serif;}
#procedure .visual .text .txt{line-height:28px;font-size:20px;font-weight:300;color:#ffffff;margin:24px 0 0 0;}
#procedure .visual .background{position:absolute;z-index:4;top:0;left:0;width:100%;height:100%;pointer-events:none;}
#procedure .visual .background img{width:100%;height:100%;display:block;object-fit:cover;}
#procedure .visual .scroll{position:absolute;z-index:5;bottom:0;left:50%;width:2px;height:70px;background:rgb(255 255 255 / 20%);overflow:hidden;margin: 0 0 0 -1px;}
#procedure .visual .scroll:before{content:'';position:absolute;top:-40px;left:0;width:2px;height:40px;background:#ffffff;animation: scroll 3s ease-in-out infinite;}

/**/
#procedure .information{position:relative;display:flex;aspect-ratio:1920/900;min-height:390px;}
#procedure .information .image{flex:0 0 50%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#ffffff;}
#procedure .information .image .img{display:none;width:100%;height:100%;}
#procedure .information .image .img img{width:100%;height:100%;display:block;object-fit:cover;}
#procedure .information .image .img.on{display:block;}
#procedure .information .info{flex:0 0 50%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#111111;text-align:center;overflow:hidden;}
#procedure .information .info .con{display:none;max-width:640px;width:calc(100% - 60px);flex-direction:column;}
#procedure .information .info .con.on{display:flex;}
#procedure .information .info .eng{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;line-height:1;font-size:260px;font-family: 'Cormorant Garamond', sans-serif;font-style:italic;color:#ffffff;opacity:0.05;white-space:nowrap;}
#procedure .information .info .sub{position:relative;z-index:2;line-height: 25px;font-size: 18px;font-weight: 300;color: #ffffff;font-family: 'Cormorant Garamond', sans-serif;margin:0 0 16px 0;}
#procedure .information .info .tit{position:relative;z-index:2;line-height: 56px;font-size: 40px;font-weight: 500;color: #ffffff;font-family: 'Cormorant Garamond', 'Bookk', sans-serif;}
#procedure .information .info .txt{position:relative;z-index:2;line-height: 25px;font-size: 18px;font-weight: 200;color: #ffffff;margin:56px 0 0 0;word-break:keep-all;}
#procedure .information .info .txt + .txt{margin-top:16px;}
#procedure .information .info .txt dl{position:relative;padding:0 0 0 24px;text-align:left;width:100%;}
#procedure .information .info .txt dl:before{content:'';position:absolute;top:8px;left:0;width:8px;height:8px;background:#C5A880;transform:rotate(45deg);}
#procedure .information .info .txt dl + dl{margin-top:16px;}
#procedure .information .info .txt dt{line-height:25px;font-size:18px;font-weight:400;color:#c5a880;}
#procedure .information .info .txt dd{line-height: 28px;font-size:18px;font-weight:200;color:#ffffff;margin:8px 0 0 0;word-break:keep-all;}
#procedure .information .info .act{position:relative;z-index:2;margin:49px 0 0 0;display:flex;align-items:center;justify-content:center;gap:8px;}
#procedure .information .info .act .btn{display:flex;align-items:center;justify-content:center;min-width:142px;height:57px;border:1px solid #c5a880;font-size:18px;font-weight:300;color:#c5a880;}
#procedure .information .info .act .btn.on{font-weight:500;color:#000000;background:#c5a880;}

/**/
#procedure .recommend{position:relative;padding:120px 0;text-align:center;}
#procedure .recommend .header{margin:0 0 100px 0;}
#procedure .recommend .header .tit{line-height:56px;font-size:40px;font-weight:300;color:#222222;font-family: 'Bookk', sans-serif;}
#procedure .recommend .list{padding:0 16px;}
#procedure .recommend .list ul{display:flex;gap:8px;}
#procedure .recommend .list li{flex:1;position:relative;top:0;height: auto;display:flex;flex-direction:column;align-items:center;justify-content:center;height: 503px;}
#procedure .recommend .list li .img{position:relative;z-index:1;top:0;left:0;width:100%;height:100%;}
#procedure .recommend .list li .img img{width:100%;height:100%;display:block;object-fit:cover;}
#procedure .recommend .list li .txt{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;line-height:28px;font-size:20px;font-weight:500;color:#ffffff;background:rgb(0 0 0 / 80%);opacity:1;}
#procedure .recommend .list li:hover{position:relative;top:-24px;box-shadow:0 2px 15px rgb(0 0 0 / 3%), 0 4px 20px rgb(0 0 0 / 4%), 0 8px 25px rgb(0 0 0 / 5%), 0 16px 30px rgb(0 0 0 / 6%);}
#procedure .recommend .list li:hover .txt{opacity:0;}

/**/
#procedure .process{position:relative;padding:0 100px;background:#000000;}
#procedure .process .inner{display:flex;align-items:center;}
#procedure .process .header{flex: 1 1;position:relative;z-index:2;max-width:100%;margin:0 0 0 100px;}
#procedure .process .header:before{content:'';position:absolute;top:50%;left:0;width:164px;height:164px;margin:-82px 0 0 -41px;background:url("../img/procedure/process_circle.png") no-repeat 50% 50% / contain;animation: rotate 10s ease-in-out infinite;animation-timing-function: linear;}
#procedure .process .header .tit{position:relative;display:flex;align-items:center;gap:40px;line-height: 76px;font-size: 54px;font-weight: 300;color: #C5A880;font-family: 'Bookk', sans-serif;}
#procedure .process .header .tit:after{content:'';flex:1;width:100%;height:1px;background:#C5A880;}
#procedure .process .header .tit:before{content:'';position:absolute;top:50%;right:0;transform:translate(50%, -50%) rotate(45deg);width:12px;height:12px;background:#C5A880;}
#procedure .process .slider{flex: 0 0 782px;position:relative;z-index:1;max-width:100%;height:520px;overflow:hidden;}
#procedure .process .slider .process_slider{height:100%;}
#procedure .process .slider .swiper-wrapper{position:relative;top:-34px;}
#procedure .process .slider .swiper-slide{display:flex;align-items:center;gap:40px;padding:24px 40px;width:100%;height:82px;border: 1px solid transparent;border-radius: 16px;background-image: linear-gradient(#111, #111), linear-gradient(to right, #111 0%, rgb(197 168 128 / 60%) 50%, #111 100%);background-origin: border-box;background-clip: padding-box, border-box;transition: 500ms;}
#procedure .process .slider .swiper-slide .num{width:14px;height:34px;text-align:center;line-height:35px;font-size:24px;font-weight:300;color:#c5a880;font-family: 'Bookk', sans-serif;}
#procedure .process .slider .swiper-slide .txt{line-height:35px;font-size:18px;font-weight:500;color:#c5a880;}
#procedure .process .slider .swiper-slide .sub{line-height:21px;font-size:15px;font-weight:200;letter-spacing:-0.5px;}
#procedure .process .slider .swiper-slide-active{padding:24px 40px;height:148px;border:2px solid transparent;}
#procedure .process .slider .swiper-slide-active .num{width:27px;height:67px;line-height:67px;font-size:48px;}
#procedure .process .slider .swiper-slide-active .txt{display:flex;flex-direction:column;gap:4px;font-size:28px;font-weight:500;}
#procedure .process .slider .swiper-slide-active .sub{line-height:25px;font-size:18px;font-weight:100;}
#procedure .process .slider .button{display:none;}

/**/
#procedure .customer{position:relative;padding:120px 100px;background:url("../img/procedure/customer_icon.png") no-repeat right 40px bottom 40px / auto 240px;}
#procedure .customer .inner{display:flex;flex-direction:column;gap:120px 0;}
#procedure .customer .header{flex:0 0 290px;}
#procedure .customer .header .tit{line-height:56px;font-size:40px;font-weight:300;color:#C5A880;font-family: 'Bookk', sans-serif;}
#procedure .customer .list{flex:1 1;}
#procedure .customer .qna{display:flex;}
#procedure .customer .qna .list{border-top:2px solid #222222;border-bottom:2px solid #222222;}
#procedure .customer .qna .list > ul{}
#procedure .customer .qna .list > ul > li{border-bottom:1px solid #D2D2D2;}
#procedure .customer .qna .list > ul > li:last-child{border-bottom:0;}
#procedure .customer .qna .list > ul > li .qna_a{display:flex;gap:32px;align-items:flex-start;justify-content:flex-start;padding:24px 40px;width:100%;min-height:104px;line-height:32px;font-size:22px;font-weight:500;color:#222222;background:transparent;cursor:pointer;}
#procedure .customer .qna .list > ul > li .qna_a:before{content:'Q';line-height:56px;font-size:40px;font-weight:700;font-family: 'Cormorant Garamond', sans-serif;font-style:italic;}
#procedure .customer .qna .list > ul > li .qna_a:after{content:'';margin:16px 0;width:24px;height:24px;background:url("../img/procedure/plus.svg") no-repeat 50% 50%;}
#procedure .customer .qna .list > ul > li .qna_a span{flex:1;padding:12px 0;}
#procedure .customer .qna .list > ul > li .qna_b{display:none;position:relative;gap:16px;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:24px 44px 24px 100px;width:100%;min-height:77px;line-height:25px;font-size:18px;font-weight:300;color:#222222;word-break:keep-all;}
#procedure .customer .qna .list > ul > li .qna_b:before{content:'A';font-size:32px;font-weight:700;font-family: 'Cormorant Garamond', sans-serif;font-style:italic;position:absolute;top:24px;left:44px;}
#procedure .customer .qna .list > ul > li .qna_b span{font-weight:400;}
#procedure .customer .qna .list > ul > li .qna_b span strong{font-weight:700;}
#procedure .customer .qna .list > ul > li .qna_b ul{}
#procedure .customer .qna .list > ul > li .qna_b ul li{position:relative;padding:0 0 0 16px;line-height: 25px;font-size:16px;color:#111111;}
#procedure .customer .qna .list > ul > li .qna_b ul li + li{margin-top:8px;}
#procedure .customer .qna .list > ul > li .qna_b ul li:before{content:'';position:absolute;top: 8px;left:0;width:6px;height:6px;background:#C5A880;transform:rotate(45deg);}
#procedure .customer .qna .list > ul > li .qna_b ul li strong{font-weight:600;}
#procedure .customer .qna .list > ul > li .qna_b table{text-align:center;width:100%;max-width:900px;}
#procedure .customer .qna .list > ul > li .qna_b table tr{height:49px;}
#procedure .customer .qna .list > ul > li .qna_b table th{padding:12px;font-size:16px;background:#EDE4D8;}
#procedure .customer .qna .list > ul > li .qna_b table td{padding:12px;font-size:16px;border-bottom:1px solid #EDE4D8;}
#procedure .customer .qna .list > ul > li.on{border-bottom:1px solid #222222;}
#procedure .customer .qna .list > ul > li.on .qna_a{color:#ffffff;background:#111111;}
#procedure .customer .qna .list > ul > li.on .qna_a:after{content:'';width:24px;height:24px;background:url("../img/procedure/minus.svg") no-repeat 50% 50%;}
#procedure .customer .qna .list > ul > li.on .qna_b{display:flex;}
#procedure .customer .caution{display:flex;}
#procedure .customer .caution .list{flex:1 1;display:flex;flex-direction:column;gap:16px;}
#procedure .customer .caution .list span{display:flex;align-items:flex-start;gap:12px;line-height:25px;font-size:18px;font-weight:300;color:#111111;}
#procedure .customer .caution .list span:before{content:'';margin:8.5px 0 0 0;width:8px;height:8px;background:#C5A880;transform:rotate(45deg);flex:0 0 auto;}

/**/
#procedure .change{position:relative;background:url("../img/procedure/bg_change.png") no-repeat 50% 50% / cover;}
#procedure .change .header{display:flex;flex-direction:column;align-items:center;padding:120px 16px 100px;background:rgb(0 0 0 / 80%);text-align:center;}
#procedure .change .header .tit{line-height:67px;font-size:48px;font-weight:600;color:#c5a880;font-family: 'Cormorant Garamond', sans-serif;}
#procedure .change .header .txt{line-height:31px;font-size:22px;font-weight:300;color:#ffffff;margin:24px 0 0 0;font-family:'Bookk', sans-serif;}
#procedure .change .list{}
#procedure .change .list ul{display:flex;}
#procedure .change .list li{flex:1;height:325px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;}
#procedure .change .list li:nth-child(odd){background:rgb(255 255 255 / 10%);}
#procedure .change .list li:nth-child(even){background:rgb(255 255 255 / 20%);}
#procedure .change .list li .num{position:absolute;bottom:-48px;right:0;line-height:1;font-size:220px;color:#ffffff;opacity:0.06;font-family: 'Cormorant Garamond', sans-serif;font-style:italic;}
#procedure .change .list li .txt{line-height:28px;font-size:20px;font-weight:500;color:#ffffff;}

/**/
#procedure .solution{position:relative;padding:120px 16px;}
#procedure .solution .header{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin:0 0 48px 0;}
#procedure .solution .header .sub{line-height:28px;font-size:20px;font-weight:500;color:#c5a880;margin:0 0 16px 0;}
#procedure .solution .header .tit{line-height:49px;font-size:35px;font-weight:500;color:#222222;margin:0 0 40px 0;font-family:'Bookk', sans-serif;}
#procedure .solution .header .txt{line-height:28px;font-size:20px;font-weight:300;color:#222222;margin:0 0 40px 0;font-family:'Bookk', sans-serif;}
#procedure .solution .header .ico{margin:0 auto;width:32px;height:32px;background:url("../img/procedure/solution_arrow.svg") no-repeat 50% 50% / contain;}
#procedure .solution .list{margin:0 auto;max-width:1920px;}
#procedure .solution .list ul{display:flex;gap:8px;}
#procedure .solution .list li{flex:1;position:relative;width:100%;height:auto;aspect-ratio:466/600;}
#procedure .solution .list li:before{content:'';position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background: linear-gradient(0deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);}
#procedure .solution .list li img{width:100%;height:100%;object-fit:cover;}
#procedure .solution .list li span{position:absolute;z-index:2;bottom:24px;left:0;width:100%;text-align:center;line-height:31px;font-size:22px;color:#ffffff;font-family:'Bookk', sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;}

/**/
#procedure .technique{position:relative;display:flex;align-items:center;padding:138px 0;background:#C5A880;gap:40px;}
#procedure .technique .header{flex: 9;margin:0 0 0 100px;}
#procedure .technique .header .eng{position:relative;margin:0 0 48px 0;line-height:67px;font-size:48px;/* font-weight:700; */color:#532E1C;font-family: 'Cormorant Garamond', 'Bookk', sans-serif;}
#procedure .technique .header .eng:before{content:'';position:absolute;top:50%;left:0;width:140px;height:140px;margin:-70px 0 0 -42px;background:url("../img/procedure/technique_circle.png") no-repeat 50% 50% / contain;animation: rotate 10s ease-in-out infinite;animation-timing-function: linear;}
#procedure .technique .header .tit{line-height:38px;font-size:27px;font-weight:300;color:#532e1c;margin:0 0 16px 0;font-family:'Bookk', sans-serif;}
#procedure .technique .header .txt{line-height:25px;font-size:18px;font-weight:300;color:#532e1c;letter-spacing:-0.5px;}
#procedure .technique .image{flex: 11;margin:0 40px 0 0;aspect-ratio:956/624;box-shadow:-5px 8px 30px rgb(0 0 0 / 4%), -10px 16px 60px rgb(0 0 0 / 8%);}
#procedure .technique .image img{width:100%;height:100%;object-fit:cover;}

/**/
#procedure .feature{position:relative;padding:138px 0;background:#C5A880;}
#procedure .feature .inner{display:flex;align-items:center;justify-content:space-between;}
#procedure .feature .header{position:relative;flex:1 1;padding:40px 0 40px 100px;overflow:hidden;}
#procedure .feature .header .title{position:relative;line-height: 67px;font-size: 48px;font-weight: 300;color: #532E1C;font-family: 'Bookk', sans-serif;margin:0 0 64px 0;white-space:nowrap;}
#procedure .feature .header .title:before{content:'';position:absolute;top:50%;left:0;width:164px;height:164px;margin:-82px 0 0 -41px;background:url("../img/procedure/feature_circle.png") no-repeat 50% 50% / contain;animation: rotate 10s ease-in-out infinite;animation-timing-function: linear;}
#procedure .feature .header .text{overflow:hidden;}
#procedure .feature .header .text .swiper-slide{opacity:0 !important;}
#procedure .feature .header .text .swiper-slide-active{opacity:1 !important;}
#procedure .feature .header .text .name{line-height:38px;font-size:27px;color:#532E1C;font-family: 'Bookk', sans-serif;margin:0 0 16px 0;}
#procedure .feature .header .text .name span{margin-left:16px;font-size:22px;font-family: 'Cormorant Garamond', sans-serif;font-style:italic;}
#procedure .feature .header .text .desc{line-height:25px;font-size:18px;font-weight:300;color:#532E1C;max-width:480px;word-break:keep-all;}
#procedure .feature .header .button{position:relative;margin:65px 0 0 0;display:flex;align-items:center;}
#procedure .feature .header .button .swiper-prev{display:flex;align-items:center;justify-content:center;width:84px;height:84px;background:rgb(0 0 0 / 50%);flex:0 0 auto;}
#procedure .feature .header .button .swiper-prev:before{content:'';width:24px;height:24px;background:url("../img/procedure/feature_arrow_left.svg") no-repeat center;}
#procedure .feature .header .button .swiper-prev:hover{background:rgb(0 0 0 / 100%);}
#procedure .feature .header .button .swiper-next{display:flex;align-items:center;justify-content:center;width:84px;height:84px;background:rgb(0 0 0 / 50%);flex:0 0 auto;}
#procedure .feature .header .button .swiper-next:before{content:'';width:24px;height:24px;background:url("../img/procedure/feature_arrow_right.svg") no-repeat center;}
#procedure .feature .header .button .swiper-next:hover{background:rgb(0 0 0 / 100%);}
#procedure .feature .header .button .swiper-fraction{margin:0 0 0 32px;font-size:40px;color:#978176;font-family: 'Cormorant Garamond', sans-serif;font-style: italic;}
#procedure .feature .header .button .swiper-fraction .swiper-pagination-current{font-weight:700;color:#532E1C;font-family: 'Cormorant Garamond', sans-serif;font-style: italic;}
#procedure .feature .header .button .swiper-fraction .swiper-pagination-total{font-weight:400;font-family: 'Cormorant Garamond', sans-serif;font-style: italic;}
#procedure .feature .slider{position:relative;flex:0 0 auto;margin:0 40px;overflow:hidden;max-width:50%;width:100%;aspect-ratio:956 / 624;}
#procedure .feature .slider .swiper-slide{display:flex;align-items:center;justify-content:center;}
#procedure .feature .slider img{width:100%;max-width:100%;height:auto;/*box-shadow:-5px 8px 30px rgb(0 0 0 / 4%), -10px 16px 60px rgb(0 0 0 / 8%);*/}

/**/
#procedure .formation{position:relative;align-items:center;padding:80px 16px 120px;overflow:hidden;}
#procedure .formation .inner{display:flex;align-items:center;}
#procedure .formation .text{flex:1;margin:0 40px 0 85px;}
#procedure .formation .text .tit{line-height:67px;font-size:48px;font-weight:700;color:#222222;margin:0 0 48px 0;font-family: 'Cormorant Garamond', 'Bookk', sans-serif;}
#procedure .formation .text .txt{line-height:25px;font-size:18px;font-weight:400;color:#222222;}
#procedure .formation .slider{position:relative;width:972px;max-width:100%;margin:0 25px 0 0;pointer-events: none;}
#procedure .formation .slider .scroll{position:relative;height:700px;}
#procedure .formation .slider .image{position:relative;-webkit-transition-timing-function:linear!important;transition-timing-function:linear!important;transition-duration: 12000ms;}
#procedure .formation .slider .image ul{width:100%;display:flex;flex-wrap:wrap;gap:40px;height: auto;flex: 0 0 auto;}
#procedure .formation .slider .image li{display:flex;flex-direction:column;align-items:center;text-align:center;width:calc(50% - 20px);}
#procedure .formation .slider .image li:nth-child(even){margin-top:180px;}
#procedure .formation .slider .image li img{width:100%;height:auto;aspect-ratio:1/1;}
#procedure .formation .slider .image li strong{display:block;margin:24px 0 0 0;line-height:34px;font-size:24px;font-weight: 500;color:#222222;}
#procedure .formation .slider .image li strong.eng{font-family:'Cormorant Garamond', 'Pretendard', sans-serif;}
#procedure .formation .slider .image li span{display:block;margin:16px 0 0 0;line-height:22px;font-size:16px;font-weight:300;color:#666666;font-family:'Pretendard', sans-serif;}
#procedure .formation .slider .product{position:relative;-webkit-transition-timing-function:linear!important;transition-timing-function:linear!important;transition-duration: 12000ms;}
#procedure .formation .slider .product ul{width:100%;display:flex;flex-wrap:wrap;gap:24px;height: auto;flex: 0 0 auto;}
#procedure .formation .slider .product li{display:flex;flex-direction:row;align-items:center;text-align:center;width:100%}
#procedure .formation .slider .product li .img{flex:0 0 auto;width:280px;height:280px;background:#F9F6F2;}
#procedure .formation .slider .product li .img img{width:100%;height:100%;object-fit:contain;}
#procedure .formation .slider .product li .con{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:280px;text-align:left;padding:0 0 0 32px;gap:16px;}
#procedure .formation .slider .product li .tit{line-height:31px;font-size:22px;font-weight:500;color:#222222;}
#procedure .formation .slider .product li .txt{line-height:22px;font-size:16px;font-weight:300;color:#666666;word-break:keep-all;}

/**/
#procedure .lineup{position:relative;align-items:center;padding:80px 16px 120px;overflow:hidden;}
#procedure .lineup .inner{display:flex;align-items:center;}
#procedure .lineup .text{flex:1;margin:0 40px 0 85px;}
#procedure .lineup .text .tit{line-height:67px;font-size:48px;font-weight:700;color:#222222;margin:0 0 48px 0;font-family: 'Cormorant Garamond', 'Bookk', sans-serif;}
#procedure .lineup .text .txt{line-height:25px;font-size:18px;font-weight:400;color:#222222;}
#procedure .lineup .product{position:relative;width:972px;max-width:100%;margin:0 25px 0 0;}
#procedure .lineup .product {position:relative;-webkit-transition-timing-function:linear!important;transition-timing-function:linear!important;transition-duration: 12000ms;}
#procedure .lineup .product ul{width:100%;display:flex;flex-wrap:wrap;gap:24px;height: auto;flex: 0 0 auto;}
#procedure .lineup .product li{display:flex;flex-direction:row;align-items:center;text-align:center;width:100%}
#procedure .lineup .product li .img{flex:0 0 auto;width:280px;height:280px;background:#F9F6F2;}
#procedure .lineup .product li .img img{width:100%;height:100%;object-fit:contain;}
#procedure .lineup .product li .con{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:280px;text-align:left;padding:0 0 0 32px;gap:16px;}
#procedure .lineup .product li .tit{line-height:31px;font-size:22px;font-weight:500;color:#222222;}
#procedure .lineup .product li .txt{line-height:22px;font-size:16px;font-weight:300;color:#666666;word-break:keep-all;}

/**/
#procedure.lifting{}
#procedure.lifting .visual{}
#procedure.lifting .visual .text .eng{font-feature-settings: 'liga' off, 'clig' off;}

/**/
#procedure.potesza .technique .image{box-shadow:none;}

/**/
#procedure.picoandy .technique .image{box-shadow:none;}

/**/
#procedure.inflammation .information .info .eng{font-size:180px;}

@media (max-width:2200px) {
    #procedure.hyaluronic .information .info .eng{font-size:180px;}
    #procedure.inflammation .information .info .eng{font-size:140px;}
}
@media (max-width:1920px) {
    #procedure.hyaluronic .information .info .eng{font-size:140px;}
}
@media (max-width:1440px) {
    #procedure .information .info .eng{font-size:140px;}
}
@media (max-width:1240px) {
    #procedure .information .info .eng{font-size:140px;}
    #procedure.inflammation .information .info .eng{font-size:90px;}
}
@media (max-width:768px) {

    /**/
    #procedure .visual{width:100%;height:calc(100dvh - 64px);}
    #procedure .visual .text{padding:0 38px 50px 38px;}
    #procedure .visual .text .eng{line-height:100px;font-size:100px;margin:0 0 -62px 0;}
    #procedure .visual .text .tit{line-height:1.4;font-size:48px;}
    #procedure .visual .text .txt{line-height:1.4;font-size:18px;margin:16px 0 0 0;}
    #procedure .visual .text .txt .desktop{display:none;}
    #procedure.thermage .visual .text .eng{font-size:90px;}

    /**/
    #procedure .information{aspect-ratio:auto;flex-direction:column;}
    #procedure .information .image{order:2;width:100%;flex:0 0 100%;aspect-ratio:1/1;}
    #procedure .information .info{order:1;width:100%;flex:0 0 100%;display:flex;flex-direction:column;}
    #procedure .information .info .con{padding:56px 24px;text-align:left;width: 100%;}
    #procedure .information .info .eng{order:5;font-size:100px}
    #procedure .information .info .sub{order:6;}
    #procedure .information .info .tit{order:7;line-height:1.4;font-size:28px;}
    #procedure .information .info .txt{order:8;line-height:1.4;font-size:15px;margin:24px 0 0 0;}
    #procedure .information .info .txt dl{}
    #procedure .information .info .txt dl:before{}
    #procedure .information .info .txt dl + dl{margin-top:8px;}
    #procedure .information .info .txt dt{line-height: 1.4;font-size: 16px;}
    #procedure .information .info .txt dd{line-height: 1.4;font-size: 15px;}
    #procedure .information .info .act{order:1;margin:0 0 40px 0;}
    #procedure .information .info .act .btn{flex:1;height:40px;font-size:16px;}

    /**/
    #procedure .recommend{padding:56px 0;}
    #procedure .recommend .header{margin:0 0 40px 0;}
    #procedure .recommend .header .tit{line-height:1.4;font-size:28px;}
    #procedure .recommend .list{}
    #procedure .recommend .list ul{flex-direction:column;}
    #procedure .recommend .list li{flex:0 0 auto;aspect-ratio:auto;height:100px;}
    #procedure .recommend .list li .txt{line-height:1.4;font-size:16px;font-weight:400;}
    #procedure .recommend .list li:hover{top:0;}
    #procedure .recommend .list li:hover .txt{opacity:0;}

    /**/
    #procedure .formation{padding:32px 16px;}
    #procedure .formation .inner{flex-direction:column;}
    #procedure .formation .text{margin:0 0 40px 0;}
    #procedure .formation .text .tit{line-height:1.4;font-size:32px;margin:0 0 16px 0;}
    #procedure .formation .text .txt{line-height:1.4;font-size:16px;}
    #procedure .formation .slider{width:100%;margin:0;overflow:hidden;}
    #procedure .formation .slider .scroll{position:relative;height:700px;}
    #procedure .formation .slider .image{position:relative;-webkit-transition-timing-function:linear!important;transition-timing-function:linear!important;transition-duration: 12000ms;}
    #procedure .formation .slider .image ul{gap:8px;}
    #procedure .formation .slider .image li{width:calc(50% - 4px);}
    #procedure .formation .slider .image li:nth-child(even){margin-top:80px;}
    #procedure .formation .slider .image li img{}
    #procedure .formation .slider .image li strong{margin:16px 0 0 0;line-height:1.4;font-size:16px;}
    #procedure .formation .slider .image li span{margin:8px 0 0 0;line-height:1.4;font-size:15px;}
    #procedure .formation .slider .product{}
    #procedure .formation .slider .product ul{gap:24px;}
    #procedure .formation .slider .product li{}
    #procedure .formation .slider .product li .img{width:25%;aspect-ratio:1/1;height:auto;}
    #procedure .formation .slider .product li .con{height:auto;gap:8px;}
    #procedure .formation .slider .product li .tit{line-height:1.4;font-size:16px;}
    #procedure .formation .slider .product li .txt{line-height:1.4;font-size:15px;}

    /**/
    #procedure .lineup{padding:32px 8px;}
    #procedure .lineup .inner{flex-direction:column;align-items:stretch;}
    #procedure .lineup .text{flex:1;margin:0 8px 40px;}
    #procedure .lineup .text .tit{line-height:1.4;font-size:28px;margin:0 0 16px 0;}
    #procedure .lineup .text .txt{line-height:1.4;font-size:15px;}
    #procedure .lineup .product{margin:0;overflow-x:auto;}
    #procedure .lineup .product ul{flex-wrap:nowrap;width:100%;gap:8px;}
    #procedure .lineup .product li{flex-direction:column;width:80%;flex:0 0 auto;align-items:stretch;}
    #procedure .lineup .product li .img{width:100%;height:auto;aspect-ratio:1/1;}
    #procedure .lineup .product li .con{padding:16px 8px 24px;gap:8px;}
    #procedure .lineup .product li .tit{line-height:1.4;font-size:20px;}
    #procedure .lineup .product li .txt{line-height:1.4;font-size:15px;}

    /**/
    #procedure .process{padding:56px 8px;}
    #procedure .process .inner{flex-direction:column;}
    #procedure .process .header{margin:0 0 40px;}
    #procedure .process .header:before{display:none;}
    #procedure .process .header .tit{line-height:1.4;font-size:28px;}
    #procedure .process .header .tit:after,
    #procedure .process .header .tit:before{display:none;}
    #procedure .process .slider{flex:0 0 auto;width:100%;height:auto;}
    #procedure .process .slider.expend .process_slider .swiper-slide{display:flex;}
    #procedure .process .slider .process_slider{height:auto;}
    #procedure .process .slider .swiper-wrapper{top:0;transform:unset !important;}
    #procedure .process .slider .swiper-slide{display:none;gap:24px;padding:16px 24px;min-height:60px;height:auto;border-radius:8px;}
    #procedure .process .slider .swiper-slide:nth-child(1),
    #procedure .process .slider .swiper-slide:nth-child(2),
    #procedure .process .slider .swiper-slide:nth-child(3),
    #procedure .process .slider .swiper-slide:nth-child(4),
    #procedure .process .slider .swiper-slide:nth-child(5){display:flex;}
    #procedure .process .slider .swiper-slide:last-child{margin-bottom:0 !important;}
    #procedure .process .slider .swiper-slide .num{width:12px;height:28px;font-size:20px;line-height:1.4;}
    #procedure .process .slider .swiper-slide .txt{line-height:22px;font-size:16px;}
    #procedure .process .slider .swiper-slide .sub{line-height:20px;font-size:14px;margin:4px 0 0 0;}
    #procedure .process .slider .swiper-slide-active{padding:16px 24px;height:60px;border-radius:8px;}
    #procedure .process .slider .swiper-slide-active .num{width:12px;height:28px;font-size:20px;line-height:1.4;}
    #procedure .process .slider .swiper-slide-active .txt{line-height:1.4;font-size:16px;}
    #procedure .process .slider .swiper-slide-active .sub{line-height:1.4;font-size:12px;}
    #procedure .process .slider .button{display:flex;align-items:center;justify-content:center;}
    #procedure .process .slider .button button{display:flex;align-items:center;justify-content:center;line-height:22px;font-size:16px;font-weight:500;color:#c5a880;gap:8px;margin:24px 0 0 0;}
    #procedure .process .slider .button button:after{content:'';width:16px;height:16px;background:url("../img/procedure/more.svg") no-repeat 50% 50% / contain;}
    #procedure .process .slider .button button.active{display:none;}

    /**/
    #procedure .customer{padding:56px 8px;background:none;}
    #procedure .customer .inner{flex-direction:column;gap:64px 0;}
    #procedure .customer .header{flex:0 0 100%;margin:0 0 40px;}
    #procedure .customer .header .tit{line-height:1.4;font-size:28px;text-align:center;}
    #procedure .customer .list{flex:1 1;}
    #procedure .customer .qna{flex-direction:column;}
    #procedure .customer .qna .list{border-top:2px solid #222222;border-bottom:2px solid #222222;}
    #procedure .customer .qna .list > ul{}
    #procedure .customer .qna .list > ul > li{border-bottom:1px solid #D2D2D2;}
    #procedure .customer .qna .list > ul > li:last-child{border-bottom:0;}
    #procedure .customer .qna .list > ul > li .qna_a{padding:16px;gap:16px;font-size:16px;line-height:22px;min-height:66px;}
    #procedure .customer .qna .list > ul > li .qna_a:before{line-height:42px;font-size:24px;}
    #procedure .customer .qna .list > ul > li .qna_a:after{width:16px;height:16px;margin: 12px 0px;}
    #procedure .customer .qna .list > ul > li .qna_a span{padding:10px 0;}
    #procedure .customer .qna .list > ul > li .qna_b{padding:16px;font-size:16px;line-height:1.4;}
    #procedure .customer .qna .list > ul > li .qna_b:before{display:none;}
    #procedure .customer .qna .list > ul > li .qna_b span:nth-child(1){padding-left:32px;}
    #procedure .customer .qna .list > ul > li .qna_b span:nth-child(1):before{content:'A';font-family: 'Cormorant Garamond', sans-serif;font-style:italic;position:absolute;line-height:1;font-size:24px;top:16px;left:16px;}
    #procedure .customer .qna .list > ul > li .qna_b table{}
    #procedure .customer .qna .list > ul > li .qna_b table tr{}
    #procedure .customer .qna .list > ul > li .qna_b table th{padding:6px;font-size:15px;}
    #procedure .customer .qna .list > ul > li .qna_b table td{padding:6px;font-size:15px;}
    #procedure .customer .qna .list > ul > li.on{border-bottom:1px solid #222222;}
    #procedure .customer .qna .list > ul > li.on .qna_a{color:#ffffff;background:#111111;}
    #procedure .customer .qna .list > ul > li.on .qna_a:after{width:16px;height:16px;}
    #procedure .customer .qna .list > ul > li.on .qna_b{display:flex;}
    #procedure .customer .caution{flex-direction:column;}
    #procedure .customer .caution .list{padding:0 8px;}
    #procedure .customer .caution .list span{line-height:1.4;font-size:15px;}
    #procedure .customer .caution .list span:before{margin:4.5px 0 0 0;}

    /**/
    #procedure .change{}
    #procedure .change .header{padding:56px 8px;}
    #procedure .change .header .tit{line-height:1.4;font-size:28px;}
    #procedure .change .header .txt{line-height:1.4;font-size:17px;margin:12px 0 0 0;}
    #procedure .change .list{}
    #procedure .change .list ul{flex-wrap:wrap;}
    #procedure .change .list li{flex:0 0 50%;width:50%;height:auto;aspect-ratio:187/127;}
    #procedure .change .list li:nth-child(1){background:rgb(255 255 255 / 10%);}
    #procedure .change .list li:nth-child(2){background:rgb(255 255 255 / 20%);}
    #procedure .change .list li:nth-child(3){background:rgb(255 255 255 / 20%);}
    #procedure .change .list li:nth-child(4){background:rgb(255 255 255 / 10%);}
    #procedure .change .list li .num{bottom:-24px;font-size:100px;}
    #procedure .change .list li .txt{line-height:1.4;font-size:16px;}

    /**/
    #procedure .solution{padding:56px 8px;}
    #procedure .solution .header{margin:0 0 32px 0;}
    #procedure .solution .header .sub{line-height:1.4;font-size:16px;}
    #procedure .solution .header .tit{line-height:1.4;font-size:27px;}
    #procedure .solution .header .txt{line-height:1.4;font-size:16px;}
    #procedure .solution .header .ico{width:24px;height:24px;}
    #procedure .solution .list{margin:0;width:100%;height:100%;}
    #procedure .solution .list ul{flex-direction:column;gap:8px;}
    #procedure .solution .list li{flex: 0 0 auto;height: 100px;aspect-ratio:auto;}
    #procedure .solution .list li:before{background:rgb(0 0 0 / 30%);}
    #procedure .solution .list li span:after{content:'';width:20px;height:20px;background:url("../img/procedure/change_arrow.png") no-repeat 50% 50% / contain;}
    #procedure .solution .list li img{width:100%;height:100%;object-fit:cover;}
    #procedure .solution .list li span{bottom:unset;top:50%;transform:translateY(-50%);line-height:1.4;font-size:20px;}

    /**/
    #procedure .technique{padding:56px 8px;flex-direction:column;align-items:stretch;gap:0;}
    #procedure .technique .header{margin:0 8px 40px;flex:0 0 auto;}
    #procedure .technique .header .eng{margin:0 0 8px;line-height:39px;font-size:28px;font-weight:600;}
    #procedure .technique .header .eng:before{display:none;}
    #procedure .technique .header .tit{line-height:1.4;font-size:22px;}
    #procedure .technique .header .txt{line-height:1.4;font-size:15px;}
    #procedure .technique .image{flex:0 0 auto;width:100%;margin:0;}

    /**/
    #procedure .feature{padding:56px 16px;}
    #procedure .feature .inner{position:relative;flex-direction:column;align-items:stretch;padding-bottom:72px;}
    #procedure .feature .header{padding:0;position:unset;}
    #procedure .feature .header .title{line-height:1.4;font-size:28px;margin:0 0 16px 0;}
    #procedure .feature .header .title:before{display:none;}
    #procedure .feature .header .text{overflow:hidden;}
    #procedure .feature .header .text .swiper-slide{opacity:0 !important;}
    #procedure .feature .header .text .swiper-slide-active{opacity:1 !important;}
    #procedure .feature .header .text .name{display:flex;flex-direction:column;align-items:flex-start;line-height:1.4;font-size:22px;}
    #procedure .feature .header .text .name span{margin:4px 0 0 0;line-height:1.4;font-size:18px;}
    #procedure .feature .header .text .desc{line-height:1.4;font-size:15px;}
    #procedure .feature .header .button{position:absolute;bottom:0;}
    #procedure .feature .header .button .swiper-prev{width:56px;height:56px;}
    #procedure .feature .header .button .swiper-next{width:56px;height:56px;}
    #procedure .feature .header .button .swiper-fraction{margin:0 0 0 24px;font-size:35px;}
    #procedure .feature .slider{max-width:100%;margin:0;}
    #procedure .feature .slider .swiper-slide{display:flex;align-items:center;justify-content:center;}
    #procedure .feature .slider img{width:100%;max-width:100%;height:auto;/*box-shadow:-5px 8px 30px rgb(0 0 0 / 4%), -10px 16px 60px rgb(0 0 0 / 8%);*/}
}