@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	header, footer, main 관련 작성 css 파일입니다.

	** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다.

───────────────────────────────────────────────────────────*/
/* body::-webkit-scrollbar {display: none;} */
/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%; box-sizing: border-box; overflow: clip;}
    .w_custom{position: relative; width: calc(100% - 60px); max-width: 1400px; margin-inline: auto; box-sizing: border-box;}
    #container{position: relative; padding-block:var(--row-gap100) var(--row-gap120); box-sizing: border-box;}
    body:has(.fullSec) #container{width:100%;max-width:100%;}
    body:has(.pbn) #container{padding-bottom:0;}
    body:has(.ptn) #container{padding-top:0;}
    body:has(.pdn) #container{padding:0;}

    .link{position: absolute; inset: 0; z-index: 3;}
    .bg-sec{padding-block: var(--row-gap140); background: var(--gray-bg01);}
    .bg-sec.type02{padding-block: var(--row-gap120);}

    .sr-only{position: absolute;width: 1px; height: 1px;margin: -1px;padding: 0;overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
    .sr-only-focusable:active, .sr-only-focusable:focus{position: static;width: auto;height: auto;margin: 0;overflow: visible;clip: auto;white-space: normal;}

    @media (max-width:1600px){
        br.for_pc{display: none;}
    }

    @media (max-width:1400px){
        br.for_pc{display: none;}
    }
    @media (max-width:860px){
        .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:320px){
        .w_custom{width: calc(100% - 20px);}
    }


/*───────────────────────────────────────────────────────────

    HEADER | outline/header.html, outline/nav.html

───────────────────────────────────────────────────────────*/
	#header{position: fixed;top:0;left:0;width: 100%;height: clamp(60px, 9vw, 90px);z-index: 100;transition: all 0.4s;background: rgb(0 0 0 / 60%);}
	#header .w_custom{max-width: 1800px ; height: 100%; display: flex; align-items: center; justify-content: space-between;}
	#header .logo{height: 100%;}
	#header .logo a{display: flex;align-items: center;max-width: clamp(150px, 25vw, 240px);height: 100%;padding-block: 15px;}
	#header .gnb{position: absolute;top:0;left:50%;translate: -50%;display: flex;justify-content: center;text-align: center;width: calc(100% - 500px);height: 100%;}
	#header .gnb > li{position: relative;font-size: var(--text-20);font-weight: 600;line-height: 1.3;transition: all 0.4s;}
	#header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;padding-inline: clamp(20px, 2.1vw, 40px);}
	#header .gnb .dep02{position: absolute;top: 80%;left: 50%;width: max-content;max-width: 300px;min-width: 110px;background: var(--point-color01);translate: -50%;padding-block: 18px;border-radius: var(--radius-10);opacity: 0;pointer-events: none;transition: inherit;}
	#header .gnb .dep02 > li{font-size: 90%;transition: inherit;}
	#header .gnb .dep02 > li > a{display: block;padding: 10px 25px;filter: var(--filter-white);transition: inherit;}
	#header .utility{display: flex; align-items: center; gap: clamp(15px, 3vw, 30px);}
	#header .allCate{display: flex;flex-direction: column;justify-content: space-between;width: clamp(30px, 3.6vw, 34px);aspect-ratio: auto 1.54;transition: all 0.4s;}
	#header .allCate span{width: 100%;height: 2px;background: var(--black-color01);}

		#header :where(.gnb > li > a, .allCate){filter: var(--filter-white);}
	
		@media (hover:hover) and (pointer:fine) {
			#header .gnb > li:hover .dep02{opacity: 1; pointer-events: auto;}
			#header .gnb .dep02:has(> li:hover) > li:not(:hover) > a{opacity: 0.4;}
		}

    @media (max-width:1200px){
        #header .gnb > li{font-size:var(--text-18);}
        #header .gnb > li > a{padding-inline:10px;}
    }


/*───────────────────────────────────────────────────────────

	Aside | outline/nav.html

───────────────────────────────────────────────────────────*/
    #aside{position: fixed;top: 0;left:0;width: 100%;height: 100%;z-index: 999;background: rgba(255,255,255,0.8);backdrop-filter:blur(10px);display: flex;flex-direction: column;overflow: hidden;overflow-y: auto;padding-block: 10vh;box-sizing: border-box;opacity: 0;transition: all 0.6s;clip-path: inset(0 0 100% 0);}
        #aside.on{opacity: 1;clip-path: inset(0);}
        body:has(#aside.on){overflow: clip; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;max-width: 1800px;min-height: 100%;display: flex;align-items: center;}
    #aside .gnb{width: 100%;display: grid;align-items: start;justify-content: center;grid: auto / repeat(4, 1fr);gap: clamp(15px, 2.2vw, 40px);}
    #aside .gnb > li{color: var(--black-color01);font-size: var(--text-20);text-align: center;}
        
        @media (min-width:861px) {
            #aside .gnb > li{opacity:0;translate:0 100px;transition:all 0.8s 0.3s;}
            #aside.on .gnb > li{opacity:1;translate:0;}
            #aside.on .gnb > li:nth-child(2){transition-delay:0.4s;}
            #aside.on .gnb > li:nth-child(3){transition-delay:0.5s;}
            #aside.on .gnb > li:nth-child(4){transition-delay:0.6s;}
            #aside.on .gnb > li:nth-child(5){transition-delay:0.7s;}
            #aside.on .gnb > li:nth-child(6){transition-delay:0.8s;}
        }
    #aside .gnb > li > a{position: relative;display: block;font-size: var(--text-40);font-weight: 700;line-height: 1.4;padding-block: 30px;transition: all 0.4s;letter-spacing: 0;}
        #aside .gnb > li > a:before{position: absolute;content: '';top: 0;left: 50%;translate: -50%;width:12px;height: 0;opacity:0;border-radius:100%;background: var(--point-color01);transition:all 0.3s;}
    #aside .gnb .dep02{position: relative;}
    #aside .gnb .dep02 > li > a{display: block;font-weight: 400;padding-block: clamp(7px, 1.7vw, 13px);color: var(--black-color06);line-height: 1.6;transition: all 0.4s;}
    #aside .utility{position: absolute;top: clamp(30px, 2.8vw, 50px);right: clamp(30px, 2.8vw, 50px);display: flex;align-items: center;gap: clamp(20px, 1.6vw, 30px);z-index:2;}
    #aside .close_btn{position: relative;width: clamp(30px, 4vw, 40px);height: clamp(30px, 4vw, 40px);z-index: 9;}
    #aside .close_btn span{position: absolute;top:50%;left:50%;transform: translate(-50%, -50%) rotate(45deg);width: 100%;height: 2px;background: var(--black-color01);}
    #aside .close_btn span + span{transform: translate(-50%, -50%) rotate(-45deg);}
    
        /* over */
            @media (hover:hover) and (pointer:fine){
				#aside .gnb > li:hover > a{color: var(--point-color01);}
                #aside .gnb > li:hover > a:before{height:12px;opacity:1;}
                #aside .gnb .dep02 > li:hover a{color: var(--point-color02);}
            }

    @media (max-width:1023px){
        #aside{padding-block: clamp(80px, 12vw, 120px);}
    }
    @media (max-width:860px){
		#aside{display: block;}
		#aside .w_custom{align-items:flex-start;}
		#aside .gnb{grid-template: auto / repeat(1, 1fr);gap:0;}
        #aside .gnb > li{padding-block: clamp(20px, 3vw, 25px);text-align:left;border-bottom: 1px solid rgba(0,0,0,0.15);}
        #aside .gnb > li > a{padding-block: 0;}
		#aside .gnb > li > a:before{display: none;}
        #aside .gnb .dep02{display: grid;gap: 0 20px;grid-template: auto / repeat(2, 1fr);margin-top: clamp(10px, 1.8vw, 15px);justify-content: flex-start;}
		#aside .utility{top:15px; right: 15px;}
    }
    @media (max-width:479px){
        #aside .gnb .dep02{grid-template: auto / repeat(1, 1fr);}
    }
    
/*───────────────────────────────────────────────────────────

    MAIN | index.html

───────────────────────────────────────────────────────────*/
	/* 비주얼 */
		.main_visual {position: relative; overflow: hidden; background: var(--gray-bg04);}
		.main_visual .slick-slide {position: relative;height: clamp(550px, 92vw, 920px);overflow: hidden;}
		.main_visual .thumb{display: block; width: 100%; height: 100%; background: no-repeat center / cover; transition: all 5s 0.2s;}
            .main_visual .active .thumb{scale: 1.08;}
        .main_visual video{position: absolute;top: 50%;left: 50%;translate: -50% -50%;width: calc(100% + 10px);height: calc(100% + 10px);object-fit: cover;transform: translateZ(0);}
            .main_visual .slick-slide[data-slick-index="0"]::before{position: absolute;content:'';width: 100%;height: 1px;background: var(--point-white);left: 0;bottom: 0;z-index: 5;}
		.main_visual .txt_box{position: absolute;top: 0;left: 50%;width: calc(100% - 80px);translate: -50%;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: clamp(15px, 3vw, 30px);text-align: center;height: 100%;color: var(--point-white);}
		.main_visual .txt_box h2{font-size: var(--text-26);font-weight: 600;line-height: 1.2;letter-spacing: -0.03em;}
		.main_visual .txt_box h3{font-size: var(--text-70);font-weight: 400;line-height: 1.2;letter-spacing: -0.035em;}
			.main_visual .txt_box h3 + h4{margin-top:clamp(5px, 1vw, 10px);}
            .main_visual [data-slick-index="0"] .txt_box h3 + h4{margin-top:clamp(5px, 2.3vw, 23px);}
		.main_visual .txt_box h3 em{font-size: var(--text-80);font-weight: 700;}
		.main_visual .txt_box .parent{display:inline-flex;gap:10px;vertical-align: bottom;margin-right: 14px;}
		.main_visual .txt_box .parent{&::before, &::after{display: inline-flex;content:'';width: clamp(10px, 2vw, 20px);aspect-ratio: auto 0.28;background: url('../images/skin/parent.svg') no-repeat center / 100% auto;}}
		.main_visual .txt_box .parent::after{scale:-1 -1}
		.main_visual .txt_box h4{font-size: var(--text-22);font-weight: 400;line-height: 1.4;}
		.main_visual .txtAni{opacity: 0; translate: 0 70px; transition: all 1.2s 0.2s;}
            .main_visual .txtAni:nth-child(2){transition-delay: 0.4s;}
            .main_visual .txtAni:nth-child(3){transition-delay: 0.6s;}
            .main_visual .active .txtAni{opacity: 1; translate: 0;}
        .main_visual .controller{position: absolute;top: 0;left: 50%;translate: -50%;max-width: 1800px;height: 100%;display: flex;align-items: center;justify-content: space-between;pointer-events: none;z-index: 3;}
        .main_visual .slick-arrow{position: relative;pointer-events: auto;width: clamp(34px, 5.4vw, 54px);aspect-ratio: auto 1;}
        .main_visual .slick-arrow::before{position: absolute;content:'';width: 80%;aspect-ratio: auto 1;border: 2px solid rgb(255 255 255 / 50%);top: 50%;left: 50%;translate: -50% -50%;clip-path: var(--clip-poly02);rotate: 135deg;border-radius: 2px; transition: all 0.4s;}
        .main_visual .slick-arrow.next{scale: -1 -1;} 
        .main_visual .slick-dots{position: absolute;left: 50%;bottom: clamp(25px, 6vw, 60px);translate: -50%;z-index: 4;display: flex;justify-content: center;font-size: 0;gap: clamp(12px, 2vw, 20px);}
        .main_visual .slick-dots button{width: clamp(8px, 1.2vw, 10px);aspect-ratio: auto 1;background: rgb(255 255 255 / 50%);border-radius: 100%;transition: all 0.4s;}
        .main_visual .slick-dots .slick-active button{background: var(--point-color02);}

            /* over */
            @media (hover:hover) and (pointer:fine) {
                .main_visual .slick-arrow:hover::before{border-color: var(--point-white);}
                .main_visual .slick-dots li:not(.slick-active):hover button{background: var(--point-white);}
            }

        @media (max-width:640px) {
            .main_visual .txt_box{width: calc(100% - 30px);}
            .main_visual .controller{display: none;}
        }

    /* 타이틀 */
        .cen-title{position: relative;text-align: center;display: flex;flex-direction: column;gap: var(--row-gap20);text-wrap: balance;}
            .cen-title.hd{margin-bottom: clamp(25px, 6vw, 60px);}
        .cen-title h3{font-size: var(--text-20);line-height: 1.2;color: var(--black-color02);}
        .cen-title h4{font-size: var(--text-40);font-weight: 700;color: var(--black-color00);line-height: 1.3;font-family: var(--font-type02);letter-spacing: 0;}

        .exp-title{position: relative; display: flex; flex-direction: column; gap: var(--row-gap30);}
        .exp-title h3{font-size: var(--text-30);font-weight: 700;color: var(--black-color00);line-height: 1.3;font-family: var(--font-type02);}
			.exp-title h3 + h4{margin-top: var(--row-gap10);}
        .exp-title h4{font-size: var(--text-60);font-weight: 300;color: var(--black-color00);line-height: 1.3;letter-spacing: 0;}
		.exp-title h4 strong{font-weight:700;}
        .exp-title p{font-size: var(--text-18);color: var(--black-color06);line-height: 1.8;letter-spacing: -0.04em;}
        .exp-title .btn-box{margin-top: clamp(15px, 5vw, 50px);}


    /* arw-detail */
        .arw-detail{position: relative;font-size: var(--text-18);color: var(--point-color01);line-height: 1.4;display: flex;align-items: center;justify-content: center;gap: var(--row-gap10);width: fit-content;margin-inline: auto;padding-inline: 2px;}
        .arw-detail::before{position: absolute;content:'';width: 0;height: 1px;background: var(--point-color01);left:0;bottom:0;opacity: 0;transition: all 0.4s;}
        .arw-detail::after{display: inline-flex;content:'';width: clamp(8px, 1.2vw, 10px);aspect-ratio: auto 1;border: 1px solid var(--point-color01);clip-path: var(--clip-poly02);rotate: -45deg;}

            /* over */
            @media (hover:hover) and (pointer:fine) {
                .arw-detail:hover::before{width: 100%; opacity: 1;}
            }

    /* view-detail */
        .view-detail{position: relative;display: flex;align-items: center;justify-content: center;width: fit-content;min-width: clamp(120px, 17vw, 160px);min-height: clamp(46px, 7vw, 60px);padding: 10px clamp(20px, 3.3vw, 33px);background: var(--point-grad02);font-size: var(--text-18);font-weight: 400;color: var(--point-white);text-align: center;border-radius: var(--radius-10);letter-spacing: 0;transition: all 0.4s;}

            /* over */
            @media (hover:hover) and (pointer:fine) {
                .view-detail:hover{translate: 0 -10px;}
            }

    /* brcard-list */ 
        .brcard-list{display: grid;grid: auto / repeat(3, 1fr);gap: var(--row-gap60) var(--col-gap40);}
        .brcard-list > li{position: relative;display: flex;flex-direction: column;gap: var(--row-gap30);text-align: center;}
		.brcard-list .thumb{border-radius: var(--radius-20);overflow: hidden;aspect-ratio: auto 1.466;overflow: hidden;}
        .brcard-list .cont{display: grid;gap: var(--row-gap30);}
        .brcard-list .desc{display: grid;gap: 10px;}
        .brcard-list .desc dt{font-size: var(--text-26);font-weight: 600;color: var(--black-color00);line-height: 1.2;}
        .brcard-list .desc dd{font-size: var(--text-17);color: var(--black-color03);line-height: 1.6;}
        

        @media (max-width:1023px) {
            .brcard-list{grid: auto / repeat(2, 1fr);}
        }
        @media (max-width:479px) {
            .brcard-list{grid: auto / repeat(1, 1fr);}
        }

    /* innovation-meta */
        .innovation-meta{display: flex;align-items: flex-start;gap: var(--row-gap100) 50px;}
        .innovation-meta .exp-title{width: 100%;display: flex;flex-direction: column;gap: var(--row-gap30);}
        .innovation-meta .info-list{flex-shrink: 0;display: grid;grid: auto / repeat(2, 1fr);width: min(640px, 46%);gap: var(--row-gap80) clamp(15px, 6.3vw, 120px);}
        .innovation-meta .info-list > li{position: relative;display: flex;flex-direction: column;gap: var(--row-gap30);}
        .innovation-meta .info-list .icon{display: flex;width: clamp(46px, 7.9vw, 74px);}
        .innovation-meta .info-list .desc{display: grid;gap: var(--row-gap10);}
        .innovation-meta .info-list .desc dt{font-size: var(--text-24);font-weight: 600;color: var(--black-color01);line-height: 1.3;letter-spacing: 0;}
        .innovation-meta .info-list .desc dd{font-size: var(--text-16);color: var(--black-color06);line-height: 1.6;letter-spacing: 0;}

        @media (max-width:1023px) {
            .innovation-meta{flex-wrap: wrap;}
            .innovation-meta .info-list{width: 100%; flex-shrink: unset;}
        }
        @media (max-width:360px) {
            .innovation-meta .info-list{grid: auto / repeat(1, 1fr);}
        }

     /* product-meta */
        .product-meta{display: flex;gap: var(--row-gap60) clamp(50px, 4.2vw, 80px);}
        .product-meta .thumb{position: relative; width: min(740px, 53%);flex-shrink: 0;border-radius: var(--radius-20);overflow: hidden;}
        .product-meta .thumb::before{position: absolute; content:''; width: 100%; height: 1px; background: var(--point-white); left:0; bottom:0;}
        .product-meta .thumb video{width: 100%;height: 100%;object-fit: cover; transform: translateZ(0);}
        .product-meta .exp-title{width: 100%;}
        .product-meta .exp-title h3{letter-spacing: 0.02em;}
        .product-meta .exp-title p{letter-spacing: -0.03em;}

        @media (max-width:1023px) {
            .product-meta{flex-wrap: wrap;}
            .product-meta .thumb{width: 100%;}
        }

    /* wide-bnr */
        .wide-bnr{background: url('../images/skin/wide-bnr.jpg') no-repeat center / cover;padding-block: clamp(80px, 13.2vw, 132px);}
        .wide-bnr .cen-title{filter: var(--filter-white);}
		.wide-bnr .cen-title h3{line-height:1.4;}
        .wide-bnr .cen-title h4{font-size: var(--text-42);line-height: 1.4;}

    /* biz-card */
        .biz-card{display: grid;grid: auto / repeat(5, 1fr);gap: var(--col-gap25);}
        .biz-card > li{}
		.biz-card > li > a{position: relative;box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-20);background: var(--point-white);padding: clamp(20px, 4vw, 40px) clamp(20px, 3vw, 30px);display: flex;flex-direction: column;justify-content: space-between;gap: clamp(20px, 3.5vw, 35px);overflow: hidden;}
        .biz-card .desc{display: grid;gap: clamp(10px, 1.3vw, 13px);}
        .biz-card .desc dt{font-size: var(--text-20);font-weight: 500;color: var(--black-color00);line-height: 1.3;letter-spacing: 0;}
        .biz-card .desc dd{font-size: var(--text-16);color: var(--black-color06);line-height: 1.3;letter-spacing: -0.04em;}
        .biz-card .tel{font-size: var(--text-20);font-weight: 600;color: var(--black-color00);line-height: 1.3;font-family: var(--font-type02);letter-spacing: 0.015em;}
		
			/* over */
            @media (hover:hover) and (pointer:fine) {
				.biz-card > li:hover > a{background: var(--point-color01);box-shadow: none;}
				.biz-card > li:hover :is(.desc, .tel){filter: var(--filter-white)}
			}

        @media (max-width:1260px) {
            .biz-card{grid: auto / repeat(3, 1fr);}
        }
        @media (max-width:640px) {
            .biz-card{grid: auto / repeat(2, 1fr);}
        }
        @media (max-width:360px) {
            .biz-card{grid: auto / repeat(1, 1fr);}
        }

/*───────────────────────────────────────────────────────────

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    /* footer */
        #footer{position: relative;background: var(--point-color03);font-size: var(--text-14);color: rgb(255 255 255 / 50%);font-weight: 300;line-height: 1.3;padding-block: clamp(40px, 5vw, 50px) clamp(25px, 4vw, 40px);letter-spacing: 0;}
        #footer .top-info{display: flex;align-items: flex-end;justify-content: space-between;gap: 30px;flex-wrap: wrap;}
        #footer .logo{max-width: clamp(160px, 22vw, 210px);}
        #footer .link-list{display: flex;flex-wrap: wrap;gap: 10px clamp(25px, 4vw, 40px);}
        #footer .link-list > li{display: flex;font-size: var(--text-15);color: var(--point-white);}
        #footer .link-list strong{font-weight: 500;}
        #footer .cont{margin-top: clamp(20px, 3vw, 30px);padding-top: clamp(20px, 3vw, 30px);border-top: 1px solid rgb(255 255 255 / 10%);display: grid;gap: clamp(40px, 8vw, 80px);}
        #footer .addr-list{display: flex;flex-wrap: wrap;gap: 30px 88px;}
        #footer .addr-list > li{display: flex;flex-direction: column;gap: clamp(12px, 1.8vw, 18px);}
            #footer .addr-list > li:nth-child(2) .desc dt{width: 60px;}
            #footer .addr-list > li:nth-child(3) .desc dt{width: 80px;}
        #footer .addr-list .desc{display: flex;align-items: baseline;gap: clamp(20px, 4vw, 40px);}
        #footer .addr-list .desc dt{width: 100px;color: var(--black-color10);flex-shrink: 0;}
        #footer .addr-list .desc dd{color: var(--point-white);font-weight: 200;letter-spacing: 0.015em;}
        #footer .copy{display: flex;flex-wrap: wrap;gap: 5px 20px;font-family: var(--font-type02);letter-spacing: -0.02em;}

        @media (max-width:640px) {
            #footer{line-height: 1.6;}
            #footer .link-list{width: 100%;}
            #footer .addr-list {gap: clamp(12px, 1.8vw, 18px);}
            #footer .addr-list > li{width: 100%;}
            #footer .addr-list .desc dt{width: 100px !important;}
        }

    /* 퀵 */
        .quick-wrap{position: fixed;left: 50%;bottom: clamp(15px, 8vw, 80px);z-index: 50;translate: -50%;max-width: 1840px;display: grid;justify-items: end;height: calc(100dvh - clamp(15px, 8vw, 80px) - clamp(60px, 9vw, 90px) - 20px);gap: 30px; opacity: 0; pointer-events: none; transition: all 0.4s;}
            body:has(#header.on:not(.end)) .quick-wrap{opacity: 1;}
            body:has(#header.on:not(.end)) .quick-wrap :is(.tel-desc, .link-box a){pointer-events: auto;}
        .quick-wrap .cont{width: fit-content;display: flex;flex-direction: column;justify-content: space-between;}
        .quick-wrap .tel-desc{width: clamp(70px, 9.5vw, 90px);background: var(--point-grad02);text-align: center;color: var(--point-white);line-height: 1.3;padding: clamp(15px, 2.9vw, 29px) clamp(10px, 1.5vw, 15px);border-radius: var(--radius-10);display: grid;gap: 6px;}
        .quick-wrap .tel-desc dt{font-size: var(--text-16);font-weight: 500;display: grid;gap: var(--row-gap10);justify-items: center;}
        .quick-wrap .tel-desc dt::before{display: inline-flex;content:'';width: clamp(20px, 3.1vw, 26px);aspect-ratio: auto 1;background: url('../images/skin/quick_tel.svg') no-repeat center / 100% auto;}
        .quick-wrap .tel-desc dd{font-size: var(--text-20);font-weight: 600;text-wrap: balance;}
        .quick-wrap .link-box{display: grid;gap: 10px;justify-items: center;}
        .quick-wrap .link-box a{position: relative;display: flex;align-items: center;justify-content: center;width: clamp(40px, 4.5vw, 50px);height: clamp(40px, 4.5vw, 50px);border-radius: var(--radius-10);background: var(--point-color01);padding: 12px;}
        .quick-wrap .link-box .scr-top{background: var(--black-color00);}
        .quick-wrap .link-box .scr-top::before{display: block;content:'';width: clamp(10px, 1.7vw, 12px);aspect-ratio: auto 1;border: 2px solid var(--point-white);rotate: -135deg;clip-path: var(--clip-poly02);translate: 0 3px;border-radius: 2px;}

        @media (max-width:640px) {
            .quick-wrap .link-box{justify-items: end;}
        }