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

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

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

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%;} 
    #contents_wrap, .w_custom{position: relative; width: calc(100% - 60px); max-width: 1600px; margin:0 auto; box-sizing: border-box ;}

    @media screen and (max-width:860px){
        #contents_wrap, .w_custom{width: calc(100% - 30px);}
    }
    @media screen and (max-width:320px){
        #contents_wrap, .w_custom{width: calc(100% - 20px);}
    }




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

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

───────────────────────────────────────────────────────────*/
    .skip_nav {position:relative;z-index:9999;}
    .skip_nav a {display:block;height:1px;width:1px;margin-bottom:-1px;overflow:hidden;font-size:12px;color:#fff;font-weight:bold;white-space:nowrap;text-align:center;}
    .skip_nav a:focus, .skip_nav a:active {height:auto;width:100%;padding:0;margin-bottom:0;position:absolute;left:0;top:0;}

    #header{position: fixed; top:0; left:0; width: 100%; z-index: 50; transition: all 0.4s;}
    #header .w_custom{display: flex;align-items: center;height: 120px;max-width: 100%;gap: 5.25vw;padding-right: 100px; transition: all 0.4s;}
    #header .logo{font-size:0; height: 100%;}
    #header .logo a{display: flex; align-items: center; height: 100%; padding:10px 0; box-sizing: border-box;}
    #header .logo object{max-width: 100%; max-height: 100%; pointer-events: none;}
    #header .gnb{display: flex; flex-shrink:0; gap: 10px 4.3vw; height: 100%; font-size: var(--title-20);}
    #header .gnb > li{position: relative; height: 100%;}
    #header .gnb > li > a{display: flex; align-items: center; height: 100%; font-weight: 600; color: var(--black-color02);}
    #header .gnb > li > ul{position: absolute; top:80%; left:50%; transform: translateX(-50%); width: max-content; min-width: 140px; background: var(--point-color01); padding:15px 0; clip-path: inset(0 100% 0 0); opacity: 0; transition: all 0.4s;}
    #header .gnb > li > ul > li > a{display: block; padding:5px 20px; font-size: 80%; font-weight: 400; color: var(--black-color06);}
    #header .menu-trigger{position: absolute; top:0; right:0; width: 100px; height: 100%; background: var(--point-color01); transition: all 0.4s; display: flex; align-items: center; justify-content: center;}
    #header .menu-trigger span{position: relative; width: 32px; height: 32px; border-radius: 100%; background: rgba(255,255,255,0.2);}
        #header .menu-trigger span:before{position: absolute; content:''; width: 18.7%; height: 18.7%; background: var(--point-white); border-radius: 100%; top:50%; left:50%; transform: translate(-50%, -50%); transition: all 0.4s;}

        /* color */
            #header :is(.logo, .gnb a){filter: var(--filter-white);}

        /* on */
            #header.on{background: var(--point-white); box-shadow: 1px 1px 3px rgba(0,0,0,0.05); }
            #header.on .w_custom{height: 100px;}
            #header.on :is(.logo, .gnb > li > a){filter: none;}

        /* over */
            @media (hover:hover){
                #header :is(.logo, .gnb a){transition: all 0.4s;}
                #header:hover{background: var(--point-white);}
                #header:hover :is(.logo, .gnb > li > a){filter: none;}
                #header:hover .menu-trigger{background: var(--point-color01);}
                #header .gnb > li:hover > ul{clip-path: inset(0 0 0 0); opacity: 1;}
                #header .menu-trigger:hover span:before{animation-name: trigger; animation-duration:0.8s; animation-iteration-count:infinite; animation-direction:alternate; transition-timing-function:linear;}
                @keyframes trigger {0% {width: 18.7%; height: 18.7%;}100% {width: 70%; height: 70%;}}
            }

    @media screen and (min-width:1600px){
        #header .w_custom{width: calc(100% - 120px);}
    }
    @media screen and (max-width:1400px){
        #header .w_custom{gap: 4vw;}
        #header .gnb{gap: 10px 3.2vw;}
        #header .gnb > li{font-size: 90%;}
    }
    @media screen and (max-width:1200px){
        #header .w_custom{gap: 3.5vw;}
        #header .gnb{gap: 10px 2.5vw;}
        #header .gnb > li{font-size: 80%;}
    }
    @media screen and (max-width:1023px){
        #header .w_custom{height: 110px;}
        #header .gnb{display: none;}
    }
    @media screen and (max-width:860px){
        #header .logo a{padding:0;}
        #header .logo object{height: 60px;}
        #header .w_custom{height: 100px;}
            #header.on .w_custom{height: 90px;}
        #header.on .menu-trigger{width: 90px;}
    }
    @media screen and (max-width:640px){
        #header .logo object{height: 50px;}
        #header .w_custom{height: 90px;}
            #header.on .w_custom{height: 70px;}
        #header .menu-trigger{width: 90px;}
            #header.on .menu-trigger{width: 70px;}
    }
    @media screen and (max-width:479px){
        #header .logo object{height: 40px;}
        #header .w_custom{height: 75px; padding-right: 85px;}
            #header.on .w_custom{height: 65px;}
        #header .menu-trigger{width: 75px;}
            #header.on .menu-trigger{width: 65px;}
        #header .menu-trigger span{width: 30px; height: 30px;}
    }

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

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

───────────────────────────────────────────────────────────*/
    .aside_bg{width:30.5%;height:100%;position: fixed;top:0;left:-35%;opacity:0;transition:all 0.5s;background:url('../images/skin/cate-bg.jpg')no-repeat center top;background-size:cover;z-index:99;display: flex;align-items: flex-end;padding:0 0 100px 60px;box-sizing:border-box;}
        body:has(#aside.on) .aside_bg{left:0;opacity:1;transition:all 0.4s;}
        body:has(#aside.on){overflow: hidden; touch-action: none;}
    .aside_bg .aside_logo{display:block;padding:42px 0 0 60px;position:absolute;top:0;left:0;width:100%;}
    #aside {top:0;right:-69.6%;width:69.6%;transition:0.8s;height:100%;box-sizing:border-box;box-sizing:border-box;position:fixed;background:var(--point-color01);z-index:99;opacity:0;transition:all 0.5s;}
        #aside.on {right:0%;opacity:1;transition:all 0.5s;}

    #aside .aside_box {width:100%;height:100%;margin:0;overflow:hidden;position:relative;z-index:1;box-sizing:border-box;display:block;font-size:0;padding:40px 60px 0 60px;}
    #aside .aside_box .aside_container{width:100%;height:100%;position: relative;font-size:0;}
    #aside .aside_logo{display:none;padding:29px 0 28px 72px; filter: var(--filter-white);}
    #aside .aside_logo a{display: block;width:100%;height:100%;}

    #aside .aside_right{display:flex;align-items: center;justify-content: flex-end;}
    #aside .btn_cate{display: inline-block;box-sizing:border-box;vertical-align: top;width:40px;height:40px;position: relative;}
    #aside .btn_cate a{display: block;width:100%;height:100%;position: relative;}
    #aside .btn_cate a span{display: inline-block;width:100%;height:2px;background:#fff;position: absolute;top:50%;left:0;}
    #aside .btn_cate a span:nth-child(1){transform:rotate(-45deg);}
    #aside .btn_cate a span:nth-child(2){transform:rotate(45deg);}

    #aside .slide_container{max-height:calc(100% - 140px);display:block;box-sizing:border-box;margin-top:50px;overflow-y:auto;padding-left:60px;margin-right:60px;}
    #aside .slide_container::-webkit-scrollbar{background:var(--point-color01);width:4px;}
    #aside .slide_container::-webkit-scrollbar-thumb{width:4px;border-radius:2px;background:var(--point-white);box-sizing:border-box;} 
    #aside .slide_container > ul{font-size: var(--title-20);}
    #aside .slide_container > ul > li{display: flex;box-sizing:border-box;align-items: flex-start;flex-wrap:wrap;padding: 40px 0;}
    #aside .slide_container > ul > li + li{border-top:1px solid rgba(217, 217, 217, 0.2);}
    #aside .slide_container > ul > li .title{width:240px; font-size:150%;color:var(--point-white);font-weight:600;}
    #aside .slide_container > ul > li .sub_dep{width: calc(100% - 240px);box-sizing:border-box;padding: 0 30px 0 40px;display: flex;flex-wrap:wrap;gap: 20px 0;}
    #aside .slide_container > ul > li .sub_dep > li > a{font-size:22px;color:var(--point-white);font-weight:500;flex-shrink: 0;position: relative;}
    #aside .slide_container > ul > li .sub_dep > li.group_tit{width:100%;display: flex;gap: 15px 40px;align-items: center;}
    #aside .slide_container > ul > li .sub_dep > li.group_tit > ul{display: flex;gap: 10px 25px;flex-wrap:wrap;box-sizing:border-box;align-items: center;}
    #aside .slide_container > ul > li .sub_dep > li.group_tit > ul li{margin: 0;}
    #aside .slide_container > ul > li .sub_dep > li.group_tit > ul li a{font-size: 20px;color: rgba(255,255,255,0.6);font-weight: 300;position: relative;}

    @media only screen and (min-width:1024px) {
        #aside .slide_container > ul > li .sub_dep > li:hover > a:before, #aside .slide_container > ul > li .sub_dep > li.group_tit > ul li:hover > a:before{position: absolute; content:''; width: 100%; height: 1px; bottom:-1px; background: var(--point-white);}
        #aside .slide_container > ul > li .sub_dep > li.group_tit > ul li a:hover{color: var(--point-white);}
    }

    @media only screen and (max-width:1500px) {
        .aside_bg{padding:0 0 60px 30px;}
        .aside_bg .aside_logo{padding:37px 0 0 30px;}

        #aside .aside_box{padding:40px 30px 0 30px;}
        #aside .slide_container{padding-left:30px;margin-right:30px;}
        #aside .slide_container > ul > li .title{width:170px;}
        #aside .slide_container > ul > li .sub_dep{width: calc(100% - 170px);}
    }
    @media only screen and (max-width:1200px) {
        .aside_bg .aside_logo img{height:34px;}
        .aside_bg .aside_cs dl dt{width:68px;font-size:18px;}	
        .aside_bg .aside_cs dl dd{font-size:22px;margin-left:20px;}

        #aside .aside_box{padding:32px 30px 0 30px;}
        #aside .btn_cate{width:32px;height:32px;}
        #aside .slide_container > ul > li .sub_dep{padding-left: 0;}
        #aside .slide_container > ul > li .title{width:100%;}
        #aside .slide_container > ul > li .title p{font-size:24px;margin-bottom:30px;}
        #aside .slide_container > ul > li .sub_dep{width: 100%;margin-top: 20px;}
        #aside .slide_container > ul > li .sub_dep > li > a{font-size:20px;}
        #aside .slide_container > ul > li .sub_dep > li.group_tit > ul li a{font-size:16px;}
    }
    @media only screen and (max-width:1024px) {
        #aside .slide_container > ul > li .title{width:100%;}
        #aside .slide_container > ul > li .title p{margin-bottom:20px;}
        #aside .slide_container > ul > li .sub_dep{width: 100%;padding:0;}
        #aside .slide_container > ul > li .sub_dep > li.group_tit{gap: 15px 35px;}
    }
    @media only screen and (max-width:860px) {
        .aside_bg .aside_logo img{height:30px;}

        #aside .slide_container{padding-left:0;margin-right:0;margin-top:40px;}
    }
    @media only screen and (max-width:640px) {
        .aside_bg{display: none;}
        #aside{top:0;width:100%;right:-100%;}
        #aside .aside_box{padding: 30px 20px;}
        #aside .aside_hd{display: flex;align-items: center;justify-content: space-between;}
        #aside .aside_logo{display: block;padding:0;}
        #aside .aside_logo img{height:50px}

        #aside .slide_container{max-height:calc(100% - 80px);}
        #aside .slide_container > ul > li + li{padding: 25px 0;}
        #aside .slide_container > ul > li .title p{font-size:20px;margin-bottom:15px;color:var(--point-white);}
        #aside .slide_container > ul > li .sub_dep > li > a{font-size:18px;font-weight:400;}
        #aside .slide_container > ul > li .sub_dep{width:calc(100% - 8px);margin-left:0;}
        #aside .slide_container > ul > li .sub_dep > li{width:100%;}
        #aside .slide_container > ul > li .sub_dep > li.group_tit > ul{gap: 10px 20px;}
        #aside .slide_container > ul > li .sub_dep > li.group_tit > ul li a{color:#ccc;}
        #aside .slide_container > ul > li .sub_dep > li.group_tit{gap: 15px 30px;}
    }
    @media only screen and (max-width:479px) {
        #aside .aside_box{padding: 20px 20px;}
        #aside .aside_logo img{height: 40px;}
        #aside .btn_cate{width:25px;height:25px;}

        #aside .slide_container > ul > li .title p{font-size:18px;}
        #aside .slide_container > ul > li .sub_dep > li > a{font-size:16px;}
        #aside .slide_container > ul > li .sub_dep > li.group_tit > ul{gap: 10px 15px;}
        #aside .slide_container > ul > li .sub_dep > li.group_tit > ul li a{font-size:14px;}
        #aside .slide_container > ul > li .sub_dep > li.group_tit{gap: 15px 25px;}
    }

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

	MAIN | index.html

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

    /* 비주얼 */
        .main_visual {position:relative;}
        .main_visual .slick-slide{position: relative;height: 49vw; max-height: 100vh;}
        .main_visual .w_custom{max-width: 1600px;}
        .main_visual .thumb{position: relative;width: 100%;height: 100%;background: no-repeat center / cover; background: var(--black-color00);}
        .main_visual .thumb iframe{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 120%;height: 120%;object-fit: cover; opacity: 0.6;}
        .main_visual .txt_box{position: absolute;left:50%;bottom: 24.2%;transform: translateX(-50%);font-size: var(--title-20);font-family: var(--font-type02);color: var(--point-white); padding-right: 100px; z-index: 5;}
        .main_visual .txt_box h2{font-size: 400%; font-weight: 600; line-height: 1.2;}
        .main_visual .txt_box h5{font-size: 160%; font-weight: 500; line-height: 1.35;}
        .main_visual .txt_box h5 + h2{margin-top: 38px;}

        .main_visual .txtAni{opacity: 0; transform: translateY(70px); transition: all 1.2s; transition-delay: 0.2s;}
            .main_visual .txtAni:nth-child(2){transition-delay: 0.4s;}
            .main_visual .active .txtAni{opacity: 1; transform: translate(0);}

        .main_visual .controller{position: absolute;left:50%;bottom: 10.3%;transform: translateX(-50%);display: flex;align-items: center;gap: 30px; z-index: 9;}
        .main_visual .count{display: flex; gap: 5px; font-size: var(--title-20); font-weight: 300; font-family: var(--font-type02); color: var(--point-white); width: 70px;}
        .main_visual .count .slideCountItem{font-weight: 600;}
        .main_visual .slick-dots{display: flex; gap: 30px; margin-right: 20px;}
        .main_visual .slick-dots li button{display: flex; width: 10px; height: 10px; border-radius: 100%; background: var(--point-white); opacity: 0.3; font-size: 0; transition: all 0.4s;}
        .main_visual .slick-dots li.slick-active button{opacity: 1;}
        .main_visual .slick-arrow{font-size: 0; width: 26px; height: 15px; background: url('../images/skin/main_arw.svg') no-repeat center / 100% auto;}
        .main_visual .slick-arrow.slick-next{transform: scale(-1,-1);}
        .main_visual .scr_dwn{position: absolute;top:0;right:0;width: 100px;height: 100%;background: var(--point-color01);z-index: 9;display: flex;align-items: flex-end;}
        .main_visual .scr_dwn .trigger{display: flex;align-items: center;justify-content: flex-end;writing-mode: vertical-rl;width: 100%;transform: scale(-1, -1);padding: 50px 0;box-sizing: border-box;gap: 20px; background: var(--point-color02); cursor: pointer;}
        .main_visual .scr_dwn .trigger dt{display: flex;}
        .main_visual .scr_dwn .trigger dt span{width: 7px;height: 7px;border:2px solid var(--trans-color);border-top-color: var(--point-white);border-right-color: var(--point-white);transform: rotate(-45deg);border-radius: 2px;opacity: 0;}
            .main_visual .scr_dwn .trigger dt span{animation-duration:1.2s;animation-iteration-count:infinite;transition-timing-function:linear;margin-top: -2px;}
            .main_visual .scr_dwn .trigger dt span:nth-child(1){animation-name: scrDwn03; animation-delay: 0.4s;}
            .main_visual .scr_dwn .trigger dt span:nth-child(2){animation-name: scrDwn02; animation-delay: 0.2s;}
            .main_visual .scr_dwn .trigger dt span:nth-child(3){animation-name: scrDwn01;}
            @keyframes scrDwn01 {0% {opacity: 0;} 90% {opacity:0.3;} 100% {opacity: 0;}}
            @keyframes scrDwn02 {0% {opacity: 0;} 90% {opacity:0.5;} 100% {opacity: 0;}}
            @keyframes scrDwn03 {0% {opacity: 0;} 90% {opacity:1;} 100% {opacity: 0;}}
            
        .main_visual .scr_dwn .trigger dd{font-size: var(--title-14); font-weight: 500; color: var(--point-white);}
        

        @media screen and (max-width:1023px){
            .main_visual .slick-slide{height: 500px;}
            .main_visual .thumb iframe{width: 1100px;}
            .main_visual .txt_box{padding-right: 0;}

            .main_visual .scr_dwn{display: none;}
        }
        @media screen and (max-width:860px){
            .main_visual .txt_box h5 + h2{margin-top: 30px;}

            .main_visual .slick-dots{margin-right: 10px;}
        }
        @media screen and (max-width:640px){
            .main_visual .txt_box h2{font-size: 370%;}
            .main_visual .txt_box h5{font-size: 150%;}
            .main_visual .txt_box h5 + h2{margin-top: 25px;}
            .main_visual .controller{gap: 25px;}
            .main_visual .count{width: 60px;}
            .main_visual .slick-dots{gap: 25px;}
        }
        @media screen and (max-width:479px){
            .main_visual .txt_box h2{font-size: 280%;}
            .main_visual .txt_box h5{font-size: 120%;}
            .main_visual .txt_box h5 + h2{margin-top: 20px;}
            .main_visual .controller{gap: 20px;}
            .main_visual .count{width: 55px;}
            .main_visual .slick-dots{gap: 20px;}
            .main_visual .slick-dots li button{width: 8px; height: 8px;}
        }
        @media screen and (max-width:431px){
            .main_visual .txt_box h5 + h2{margin-top: 15px;}
        }


    /* 공통 */
        .main_content{overflow: hidden;}

        .main_title{position: relative; font-size: var(--title-20); box-sizing: border-box;}
            .main_title.cen{text-align: center;}
            .main_title.hd{margin-bottom: 76px;}
        .main_title h2{font-size: 320%;font-weight: 700;color: var(--black-color00);line-height: 1.2;letter-spacing: -0.04em;}
            .main_title h2 + h5{margin-top: 40px;}
            .main_title h2 + h6{margin-top: 42px;}
        .main_title h2 em{font-weight: inherit; color: var(--point-color01);}
		.main_title > p{font-size:120%;color:var(--black-color00);font-weight:500;margin:12px 0 30px;}
        .main_title h5{font-size: 120%; font-weight: 500; color: var(--black-color02); line-height: 1.4;}
            .main_title h5 + h2{margin-top: 47px;}
            .main_title h5 + .more_btn{margin-top: 63px;}
        .main_title h5 em{font-weight: inherit; color: var(--point-color01); font-family: var(--font-type02);}
        .main_title h6{font-size: 110%;font-weight: 400;color: var(--black-color03);line-height: 1.63;letter-spacing: -0.045em;}
        
        .more_btn{position: relative; display: inline-block; font-size: var(--title-20); line-height: 1.2; box-shadow:inset 0 0 0 1px var(--point-white); box-sizing: border-box;}
        .more_btn span{position: relative; font-weight: 500; color: var(--point-white); display: flex; align-items: center; justify-content: center; width: 180px; height: 70px; padding:0 15px; box-sizing: border-box;}
			.more_btn.blue {box-shadow:inset 0 0 0 1px var(--point-color01);}
			.more_btn.blue span {color: var(--point-color01);}
			
        .bullet_list{position: relative; font-size: var(--title-20); box-sizing: border-box;}
        .bullet_list > li{position: relative; font-size: inherit; font-weight: 500; color: var(--black-color02); letter-spacing: -0.03em; line-height: 1.5; display: flex; }
            .bullet_list > li + li{margin-top: 5px;}
            .bullet_list > li:before{display:inline-flex; content:'·'; flex-shrink:0; margin-right: 5px;}

        .main_grad{position: relative; background: var(--point-grad01); }
            .main_grad:before{position: absolute;content:'';width: 100%;height: 1106px;background: url('../images/skin/main_grad_bg.png') no-repeat center bottom / 100% auto;mix-blend-mode: lighten; left:0; bottom:0;}
        .main_grad .main_title :is(h2, h6){filter: var(--filter-white);}

            /* over */
                @media (hover:hover){
                    .more_btn:before{position: absolute;content:'';width: 100%;height: 100%;background: var(--point-color01);top:0;left:0;clip-path: circle(0 at 0 100%);transition: all 0.8s;opacity: 0;}
                    .more_btn:hover:before{clip-path: circle(200% at 0 100%);opacity: 1;}
						.more_btn.blue:hover span {color: var(--point-white);}
                }
        @media screen and (max-width:1023px){
            .main_title.hd{margin-bottom: 70px;}
            .main_title h2 + h5{margin-top: 35px;}
            .main_title h2 + h6{margin-top: 37px;}
            .main_title h5 + h2{margin-top: 40px;}
            .main_title h5 + .more_btn{margin-top: 55px;}

            .main_grad:before{height: 600px; background-size: auto 100%;}
        }
        @media screen and (max-width:860px){
            .main_title.hd{margin-bottom: 60px;}
            .main_title h2 + h5{margin-top: 30px;}
            .main_title h2 + h6{margin-top: 32px;}
            .main_title h5 + h2{margin-top: 35px;}
            .main_title h5 + .more_btn{margin-top: 50px;}
            
            .more_btn span{width: 160px; height: 65px;}
        }
        @media screen and (max-width:640px){
            .main_title.hd{margin-bottom: 50px;}
            .main_title h2{font-size: 290%;}
                .main_title h2 + h5{margin-top: 25px;}
                .main_title h2 + h6{margin-top: 27px;}
            .main_title h5{font-size: 110%;}
                .main_title h5 + h2{margin-top: 30px;}
                .main_title h5 + .more_btn{margin-top: 40px;}

            .more_btn span{width: 140px; height: 60px;}
        }
        @media screen and (max-width:479px){
            .main_title.hd{margin-bottom: 40px;}
            .main_title h2{font-size: 260%;}   
                .main_title h2 + h5{margin-top: 15px;}
                .main_title h2 + h6{margin-top: 22px;}
            .main_title h5{font-size: 100%;}
                .main_title h5 + h2{margin-top: 20px;}
                .main_title h5 + .more_btn{margin-top: 35px;}

            .more_btn span{width: 120px; height: 55px; }

            .bullet_list > li{font-size: 90%;}
            .bullet_list > li + li{margin-top: 3px;}
        }


    /* 어바웃 */
        .main_about{position: relative; padding:120px 0;}
        .main_about .main_title{padding: 144px 15px;z-index: 3; transform: translateY(-200px); transition: all 1.2s;}
        .main_about .main_title :where(h2, h5, a){transition: all 1.2s;}
        .main_about .main_title :where(h2 + h5, a){opacity: 0; }
        .main_about .thumb{position: absolute; top:0; left:0; width: 100%; height: 100%; border-radius: 800px; overflow: hidden; transform: translateY(200px); transition: all 1.2s;}
        .main_about .thumb img{width: 100%; height: 100%; object-fit: cover;}

            .main_about .aos-animate .main_title{transform: translate(0);}
            .main_about .aos-animate .main_title :where(h2, h5){filter: var(--filter-white);}
            .main_about .aos-animate .main_title :where(h2 + h5, a){opacity: 1;}
            .main_about .aos-animate .thumb{transform: translate(0); border-radius: 0;}

        @media screen and (max-width:640px){
            .main_about{padding:100px 0;}
            .main_about .main_title{padding:120px 15px; transform: translateY(-100px);}
        }
        @media screen and (max-width:479px){
            .main_about{padding:70px 0;}
            .main_about .main_title{padding: 70px 15px;}
        }

    /* 서비스 */
        .main_service{position: relative; padding:0 0 198px; box-sizing: border-box; overflow: hidden;}
            .main_service:before{position: absolute;content:'';width: 99.9vw;height: 79.5vw;background: url('../images/skin/main_service_bg.svg') no-repeat center / 100% auto;top: -41vw;left:0;}
            .main_service:before{animation-name: serTurn;animation-duration:3s;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;transition-timing-function:linear;}
            @keyframes serTurn {0% {transform:rotate(0) translateY(0);}100% {transform:rotateY(0.07turn) translateY(-30px);}}

        .main_service .info_list{counter-reset: item;}
        .main_service .info_list > li{position: relative;border-bottom: 1px solid var(--border-color01);font-size: var(--title-20);padding: 62px 0; display: flex; flex-direction: column; gap: 20px;}
            .main_service .info_list > li + li{margin-top: -4px;}
            .main_service .info_list > li:first-child{border-top: 1px solid var(--border-color01);}
            .main_service .info_list > li:before{position: absolute; content:''; top:0; left: 0; width: 100%; height: 100%; border: 4px solid #0E5AD2; background: #FFF; box-shadow: 0 0 38.4px rgba(14, 90, 210, 0.25); opacity: 0; box-sizing: border-box; transition: all 0.4s;}
        .main_service .info_list .desc{position: relative; display: flex;align-items: center;box-sizing: border-box;width: 100%; flex-wrap: wrap; transition: all 0.4s;}
        .main_service .info_list .desc:before{display: flex;justify-content: center;content: counter(item, decimal-leading-zero);counter-increment: item;font-size: 400%;font-weight: 500;color: var(--border-color02);line-height: 1;font-family: var(--font-type02);width: 17.5%;box-sizing: border-box;text-align: center;padding-left: 2.3vw;}
        .main_service .info_list .desc dt{width: 29.5%;padding-right: 15px;box-sizing: border-box;font-size: 160%;font-weight: 600;color: var(--black-color02);line-height: 1.4;letter-spacing: -0.03em;}
        .main_service .info_list .desc dt em{color: var(--point-color01);}
        .main_service .info_list .desc dd{width: 53%;font-weight: 400;color: var(--black-color05);line-height: 1.8;padding-right: 180px;box-sizing: border-box;letter-spacing: -0.04em;}
        .main_service .info_list .icon{position: absolute;top:0;right: 75px;display: flex;align-items: center;height: 100%;}
        .main_service .info_list .icon dd{position: absolute; top:0; right:0; display: flex; align-items: center; height: 100%; opacity: 0; transition: all 0.4s;}

            /* on */
                .main_service .info_list > li.on{z-index: 9;}
                .main_service .info_list > li.on:before{opacity: 1;}
                .main_service .info_list > li.on .desc{transform: translateX(-30px);}
                .main_service .info_list > li.on .icon dd{opacity: 1;}

        @media screen and (max-width:1600px){
            .main_service .info_list .desc dd br.for_pc{display: none;}
        }
        @media screen and (max-width:1200px){
            .main_service .info_list .desc:before{font-size: 370%;}
            .main_service .info_list .desc dt{font-size: 150%;}
            .main_service .info_list .desc dd{font-size: 90%;}
        }
        @media screen and (max-width:1023px){
            .main_service{padding-bottom: 150px;}
            .main_service .info_list > li{padding:50px 0;}
            .main_service .info_list > li.on .desc{transform: none;}
            .main_service .info_list .desc{padding:0 150px; gap: 10px;}
                .main_service .info_list .desc:before{position: absolute; top:50%; left:0; transform: translateY(-50%); width: 150px; padding-left: 0;}
            .main_service .info_list .desc dt{width: 100%;}
            .main_service .info_list .desc dd{width: 100%; padding-right:0;}
            .main_service .info_list .icon{right:40px;}
        }
        @media screen and (max-width:640px){
            .main_service{padding-bottom: 120px;}
            .main_service:before{width: 760px;height: 600px;left: 50%;margin-left: -380px;}
            .main_service .info_list > li{padding:40px 140px 40px 35px;}
                .main_service .info_list > li + li{margin-top: -3px;}
                .main_service .info_list > li:before{border-width: 3px; box-shadow: 0 0 19 rgba(14, 90, 210, 0.25);}
            .main_service .info_list > li.on .desc{transform: none;}
            .main_service .info_list .desc{padding:0;}
            .main_service .info_list .desc:before{position: relative; top:auto; left:auto; transform: none; width: 100%; justify-content:flex-start; font-size: 340%;}
            .main_service .info_list .desc dt{width: 100%; font-size: 140%;}
            .main_service .info_list .desc dd{width: 100%; padding-right:0;}
            .main_service .info_list .desc dd{line-height: 1.6;}
            .main_service .info_list .icon{right: 35px; width: 80px;}
        }
        @media screen and (max-width:479px){
            .main_service{padding-bottom: 100px;}
            .main_service .info_list > li{padding:35px 120px 35px 30px;}
                .main_service .info_list > li + li{margin-top: -2px;}
                .main_service .info_list > li:before{border-width: 2px;}
            .main_service .info_list .desc:before{font-size: 310%;}
            .main_service .info_list .icon{right: 30px; width: 70px;}
        }
        @media screen and (max-width:431px){
            .main_service .info_list > li{padding:30px 30px 120px;}
            .main_service .info_list .icon{top:auto; bottom:30px; width: 60px; align-items: flex-end;}
            .main_service .info_list .icon dd{align-items: flex-end;}
        }

    /* 비즈니스 */       
        .main_business{position: relative; padding:170px 0 175px;}
        .main_business .exp_list{position: relative; display: flex; align-items: flex-start; gap:62px;}
            .main_business .exp_list:before{position: absolute;content: 'BUSINESS';font-size: 10.5vw;font-weight:600;color: rgba(255,255,255,0.1);font-family: var(--font-type02);bottom: calc(100% - 4.5vw);right: -4vw;line-height: 1;}
        .main_business .exp_list > li{position: relative; width: calc(100% / 3 - 41.34px); box-sizing: border-box; font-size: var(--title-20); font-family: var(--font-type02);}
            .main_business .exp_list > li:nth-child(2){margin-top: 140px;}
            .main_business .exp_list > li:nth-child(3){margin-top: 50px;}
        .main_business .exp_list .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 9;}
        .main_business .exp_list .thumb{position: relative;display: block;font-size: 0;width: 100%;padding-bottom: 640px;overflow: hidden;box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);transition: all 0.4s;}
            .main_business .exp_list .thumb:before{position: absolute; content:''; width: 100%; height: 100%; background: rgba(12, 26, 57, 0.7); top:0; left:0; z-index: 1; opacity: 0; clip-path: circle(0 at 0 100%); border:8px solid var(--point-white); transition: all 0.6s; box-sizing: border-box;}
            .main_business .exp_list .thumb:after{position: absolute; content:''; width: 100%; height: 100%; border:8px solid var(--point-white); top:0; left:0; box-sizing: border-box; z-index: 2; opacity: 0; transition: all 0.4s; display: none;}
        .main_business .exp_list .thumb img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
        .main_business .exp_list .info{position: absolute;top: 41px;left: 52px;width: calc(100% - 100px);font-size: 160%;font-weight: 400;color: var(--point-white);line-height: 1.3;letter-spacing: -0.02em;transition: all 0.4s;z-index: 5;}
        .main_business .exp_list .info span{transition: all 0.4s;transform: translateX(-100%);position: absolute;left: 100%;width: max-content;}
        .main_business .exp_list .desc{position: absolute;left:50px;bottom: 60px;width: calc(100% - 100px);z-index: 5; transition: all 0.4s;}
        .main_business .exp_list .desc dt{font-size: 250%; font-weight: 600; color: var(--point-white); line-height: 1.25; letter-spacing: -0.03em;}
        .main_business .exp_list .desc dd{display: none; opacity: 0; transition: opacity 0.4s;}
            .main_business .exp_list > li.on .desc dd{opacity: 1;}
        .main_business .exp_list .bullet_list{filter: var(--filter-white);margin-top: 55px;}
        .main_business .exp_list .arw{position: relative;display: flex;width: 60px;height: 60px;background: var(--point-white);border-radius: 100%;margin-top: 45px;}
            .main_business .exp_list .arw:before{position: absolute;content:'';width: 10px;height: 10px;border:2px solid var(--trans-color);border-top-color: var(--point-color01);border-right-color: var(--point-color01);top:50%;left: 44%;transform: translate(-50%, -50%) rotate(45deg);border-radius: 2px;}

        
            /* over */
                @media (hover:hover){
                    .main_business .exp_list > li:hover .thumb{box-shadow: 0 0 50px rgba(0, 0, 0, 0.25);}
                    .main_business .exp_list > li:hover .thumb:before{opacity: 1; clip-path: circle(150% at 0 100%); }
                    .main_business .exp_list > li:hover .thumb:after{opacity: 1;}
                    .main_business .exp_list > li:hover .info span{left:0; transform: translate(0);}
                }

            @media screen and (min-width:1024px){
                .main_business .exp_list{transform: none !important;}
                .main_business .exp_list > li:nth-child(n+4){display:none;}
            }
        @media screen and (max-width:1680px){
            .main_business .exp_list{gap: 3.65vw;}
                .main_business .exp_list:before{right:0}
            .main_business .exp_list > li{width: calc(100% / 3 - 2.44vw);}
        }
        @media screen and (max-width:1400px){
            .main_business .exp_list .info{top:35px; left:45px; width: calc(100% - 90px);}
            .main_business .exp_list .desc{left:45px; bottom:55px; width: calc(100% - 90px);}
            .main_business .exp_list .desc dt{font-size: 230%;}
            .main_business .exp_list .bullet_list{margin-top: 50px;}
            .main_business .exp_list .arw{margin-top: 40px;}
        }
        @media screen and (max-width:1200px){
            .main_business .exp_list .thumb{padding-bottom: 580px;}
            .main_business .exp_list .info{top:30px; left:40px; width: calc(100% - 80px);}
            .main_business .exp_list .desc{left:40px; bottom:50px; width: calc(100% - 80px);}
            .main_business .exp_list .desc dt{font-size: 210%;}
            .main_business .exp_list .bullet_list{margin-top: 40px;}
            .main_business .exp_list .arw{margin-top: 30px;}
        }
        @media screen and (max-width:1023px){
            .main_business{padding:150px 0;}
            .main_business .exp_list{gap: 0;}
            .main_business .exp_list > li{width: 48.4vw; min-width:350px; margin-right: 35px;}
                .main_business .exp_list > :is(li:nth-child(2), li:nth-child(3)){margin-top: 0;}
            .main_business .exp_list .thumb{padding-bottom: 130%;}
            .main_business .exp_list .thumb:before{transition-delay: 0.35s;}
            .main_business .exp_list .desc{opacity: 0; transform: translateX(70px);}
            .main_business .exp_list > li .desc dd{display:block;}
            .main_business .exp_list .bullet_list{margin-top: 35px;}
            .main_business .exp_list .arw{margin-top: 25px;}
            
            .main_business .exp_list > li.on .thumb{box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);}
            .main_business .exp_list > li.on .thumb:before{opacity: 1; clip-path: circle(150% at 0 100%);}
            .main_business .exp_list > li.on .thumb:after{opacity: 1;}
            .main_business .exp_list > li.on .info span{left:0; transform: translate(0);}
            .main_business .exp_list > li.on .desc{opacity: 1; transform: translate(0);}

        }
        @media screen and (max-width:860px){
            .main_business .exp_list > li{margin-right: 20px;}
            .main_business .exp_list .thumb:before{border-width: 6px;}
            .main_business .exp_list .info{font-size: 140%;}
            .main_business .exp_list .desc dt{font-size: 190%;}
            .main_business .exp_list .bullet_list{margin-top: 30px;}
            .main_business .exp_list .arw{margin-top: 20px; width: 55px; height: 55px;}
        }
        @media screen and (max-width:640px){
            .main_business{padding:120px 0;}
            .main_business .exp_list > li{margin-right: 15px;}
            .main_business .exp_list > li.on .thumb{box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);}
            .main_business .exp_list .thumb:before{border-width: 4px;}
            .main_business .exp_list .info{font-size: 130%;}
            .main_business .exp_list .desc dt{font-size: 170%;}
            .main_business .exp_list .bullet_list{margin-top: 25px;}
            .main_business .exp_list .arw{ width: 50px; height: 50px;}
        }
        @media screen and (max-width:479px){
            .main_business{padding:100px 0;}
            .main_business .exp_list .info{left: 35px; width: calc(100% - 70px);}
            .main_business .exp_list .desc{left: 35px; bottom:45px; width: calc(100% - 70px);}
            .main_business .exp_list .desc dt{font-size: 160%;}
            .main_business .exp_list .bullet_list{margin-top: 20px;}
            .main_business .exp_list .arw{ width: 45px; height: 45px;}
            .main_business .exp_list .arw:before{width: 8px; height: 8px;}
        }
        @media screen and (max-width:431px){
            .main_business .exp_list > li{width: 80vw; min-width: 260px;}
        }
        @media screen and (max-width:360px){
            .main_business .exp_list .info{left: 30px; width: calc(100% - 60px);}
            .main_business .exp_list .desc{left: 30px; bottom:35px; width: calc(100% - 60px);}
            .main_business .exp_list .desc dt{font-size: 140%;}
            .main_business .exp_list .bullet_list{margin-top: 15px;}
            .main_business .exp_list .arw{ width: 40px; height: 40px;}
        }

    /* ESG */
        .main_esg{padding:0 0 185px;}
        .main_esg .main_title{padding-right: 150px;}
        .main_esg .controller{position: absolute; right:0; bottom:5px; display: flex; gap:0 40px;}
        #wrap .swiper_arw{position: relative;top:auto;right:auto;bottom:auto;left:auto;width: 42px;height: 21px;background: url('../images/skin/swiper_arw.svg') no-repeat center / 100% auto;}
            #wrap .swiper_arw:after{display: none;}
            #wrap .swiper_arw.swiper-button-next{transform: scale(-1, -1);}
        .main_esg .esgSwiper{position: relative;box-sizing: border-box;padding-right: 20.35vw;margin-top: -1vw;} 
        .main_esg .esgSwiper .swiper-slide{position: relative; font-size: var(--title-20); transition: all 0.6s; cursor: pointer;}
        .main_esg .esgSwiper .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5; pointer-events: none;}
        .main_esg .esgSwiper .thumb{position: relative; display: block; font-size: 0; width: 100%; padding-bottom: 500px; overflow: hidden; background: no-repeat left center / cover;}
            .main_esg .esgSwiper .swiper-slide[data-swiper-slide-index="0"] .thumb{background-image: url('../images/skin/main_esg_img01.jpg'); background-position: center;}
            .main_esg .esgSwiper .swiper-slide[data-swiper-slide-index="1"] .thumb{background-image: url('../images/skin/main_esg_img02.jpg');}
            .main_esg .esgSwiper .swiper-slide[data-swiper-slide-index="2"] .thumb{background-image: url('../images/skin/main_esg_img03.jpg'); background-position: center;}
            .main_esg .esgSwiper .swiper-slide[data-swiper-slide-index="3"] .thumb{background-image: url('../images/skin/main_esg_img04.jpg'); background-position: 70% 50%;}
        .main_esg .esgSwiper .thumb img{position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover;}
        .main_esg .esgSwiper .info{position: absolute;top:50%;left:50%;transform: translate(-50%, -50%);font-size: 200%;font-weight: 500;color: var(--point-white); line-height: 1.5; width: calc(100% - 30px);text-align: center;transition: all 0.4s;}
        .main_esg .esgSwiper .desc{position: absolute;left:70px;bottom: 69px;transition: all 0.6s;opacity: 0;width: max-content;transform: translateY(-70px);}
        .main_esg .esgSwiper .desc dt{font-size: 250%; font-weight: 500; color: var(--point-white); line-height: 1.2; letter-spacing: -0.03em;}
            .main_esg .esgSwiper .desc dt + dd{margin-top: 32px;}
        .main_esg .esgSwiper .desc dd{font-size: 90%; font-weight: 400; color: var(--point-white); line-height: 1.78; letter-spacing: -0.03em;}

            .main_esg .esgSwiper .swiper-slide.on .link{pointer-events: all;}
            .main_esg .esgSwiper .swiper-slide.on .info{opacity: 0;}
            .main_esg .esgSwiper .swiper-slide.on .desc{opacity: 1; transform: translateY(0);}

            @media screen and (min-width:1024px){
                .main_esg .esgSwiper .swiper-slide-next{width: 340px !important;}
            }
        @media screen and (max-width:1400px){
            .main_esg .esgSwiper .desc{left: 60px; bottom: 60px;}
            .main_esg .esgSwiper .desc dt{font-size: 230%;}
        }
        @media screen and (max-width:1200px){
            .main_esg .esgSwiper .desc{left: 55px; bottom: 55px;}
            .main_esg .esgSwiper .desc dt{font-size: 210%;}
        }
        @media screen and (max-width:1023px){
            .main_esg{padding-bottom: 150px;}
            .main_esg .controller{gap:0 30px;}
            .main_esg .esgSwiper .thumb{padding-bottom: 65%;}
            .main_esg .esgSwiper .desc{left: 50px; bottom: 50px; width: calc(100% - 100px);}
            .main_esg .esgSwiper .desc dt + dd{margin-top: 27px;}
        }
        @media screen and (max-width:860px){
            .main_esg .controller{gap:0 20px;}
            #wrap .swiper_arw{width: 36px;}
            .main_esg .esgSwiper .desc{left: 45px; bottom: 45px; width: calc(100% - 90px);}
            .main_esg .esgSwiper .desc dt{font-size: 190%;}
                .main_esg .esgSwiper .desc dt + dd{margin-top: 22px;}
        }
        @media screen and (max-width:640px){
            .main_esg{padding-bottom: 120px;}
            .main_esg .main_title{padding-right: 0;}
            .main_esg .controller{position: relative; right:auto; bottom:auto; gap:0 15px; margin-top: 40px; display: none;}
            #wrap .swiper_arw{width: 32px;}
            .main_esg .esgSwiper{padding-right: 0;}
            .main_esg .esgSwiper .swiper-wrapper{transform: none !important; flex-direction: column; gap: 15px;}
            .main_esg .esgSwiper .swiper-slide{width: 100% !important;}
            .main_esg .esgSwiper .swiper-slide:nth-child(n+5){display:none;}
            .main_esg .esgSwiper .thumb{padding-bottom: 55%;}
            .main_esg .esgSwiper .info{opacity: 0;}
            .main_esg .esgSwiper .desc{left: 40px; bottom: 40px; width: calc(100% - 80px); opacity: 1; transform: translate(0);}
            .main_esg .esgSwiper .desc dt{font-size: 170%;}
                .main_esg .esgSwiper .desc dt + dd{margin-top: 17px;}
            .main_esg .esgSwiper .desc dd{font-size: 80%; line-height: 1.6; display: none;}
        }
        @media screen and (max-width:479px){
            .main_esg{padding-bottom: 100px;}
            #wrap .swiper_arw{width: 28px;}
            .main_esg .esgSwiper .desc{left: 35px; bottom: 35px; width: calc(100% - 70px);}
            .main_esg .esgSwiper .desc dt{font-size: 160%;}
                .main_esg .esgSwiper .desc dt + dd{margin-top: 12px;}
        }
        @media screen and (max-width:360px){
            .main_esg .esgSwiper .desc{left: 30px; bottom: 30px; width: calc(100% - 60px);}
            .main_esg .esgSwiper .desc dt{font-size: 140%;}
            .main_esg .esgSwiper .desc dd{font-size: 70%;}
        }


    /* 인재채용 */
        .main_recruitment .main_title{padding-right: 160px;}
        .main_recruitment .more_circle{position: absolute; top: 50%; right:27px; transform: translateY(-50%); display: flex; width: 80px; height: 80px; border-radius: 100%; background: var(--point-white);}
            .main_recruitment .more_circle:before{position: absolute;content:'';top:50%;left:50%;transform: translate(-50%, -50%);width: 144%;height: 144%;background: url('../images/skin/more_circle.svg') no-repeat center / 100% auto; pointer-events: none;}
            .main_recruitment .more_circle:before{ animation: rotating 10s linear infinite;}
            @keyframes rotating {from {transform:translate(-50%, -50%) rotate(-360deg);} to {transform:translate(-50%, -50%) rotate(0deg);} }

            .main_recruitment .more_circle:after{position: absolute; content:''; width: 12px; height: 12px; border:2px solid var(--trans-color); border-top-color: var(--point-color01); border-right-color: var(--point-color01); top:50%; left:45%; transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px; z-index: 5; transition: all 0.4s;}
            .main_recruitment .more_circle span:before{position: absolute; content:''; width: 0; height: 0; border-radius: 100%; top:50%; left:50%; transform: translate(-50%, -50%); background: var(--point-color01); transition: all 0.4s;}

        .main_recruitment .wide_bnr{margin-top: -1vw; font-size: 0;}
        .main_recruitment .wide_bnr img{min-height: 200px; object-fit: cover}
        
            /* over */
                @media (hover:hover){
                    .main_recruitment .more_circle:hover span:before{width: 80%; height:80%;}
                    .main_recruitment .more_circle:hover:after{filter: var(--filter-white);}
                }

                    
                

        @media screen and (max-width:1023px){
            .main_recruitment .main_title{padding-right: 150px;}
            .main_recruitment .more_circle{width: 70px; height: 70px;}
        }
        @media screen and (max-width:860px){
            .main_recruitment .main_title{padding-right: 140px;}
            .main_recruitment .more_circle{width: 60px; height: 60px; right: 15px;}
        }
        @media screen and (max-width:640px){
            .main_recruitment .main_title{padding-right: 120px;}
            .main_recruitment .more_circle{width: 55px; height: 55px;}
            .main_recruitment .more_circle:after{width: 10px; height: 10px;}
        }
        @media screen and (max-width:479px){
            .main_recruitment .main_title{padding-right: 100px;}
            .main_recruitment .more_circle{width: 50px; height: 50px; right: 12px;}
            .main_recruitment .more_circle:after{width: 9px; height: 9px;}
        }

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

	FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative;margin-top: 100px;padding: 60px 0 100px;background: var(--point-grad02); overflow: hidden;}
	#footer:before {position: absolute; content: ''; width: 100%; height: 1106px; background: url("../images/skin/main_grad_bg.png") no-repeat center bottom / 100% auto; mix-blend-mode: lighten; left: 0; bottom: 0;}
		.main_index #footer {background: none;}
		.main_index #footer:before {display: none;}
	#footer .logo_desc{display: flex;align-items: center;justify-content: space-between;gap:15px 30px; flex-wrap: wrap; font-size: var(--title-20);}
    #footer .logo_desc dt{font-size:0;filter: var(--filter-white);width: 100%;max-width: 340px;}
	#footer .logo_desc dt object{width:100%; max-height: 100%;}
    #footer .logo_desc dd{font-size: 150%;font-weight: 500;color: var(--point-white);line-height: 1.4;letter-spacing: -0.03em;}
    #footer .info{border-top: 1px solid rgba(217, 217, 217, 0.2);margin-top: 64px;padding-top: 50px;}
    #footer .exp_list > li{display: flex; flex-wrap: wrap; gap: 0 40px;}
    #footer .exp_list .desc{font-size: var(--title-20); display: flex; gap: 4px;}
    #footer .exp_list .desc :where(dt, dd){font-size: 90%; font-weight: 300; color: var(--point-white); line-height: 2; font-family: var(--font-type03);}
    #footer .exp_list .desc dt{flex-shrink:0;}
    #footer .btm_desc{display: flex;align-items: center;justify-content: space-between;gap: 15px 30px;flex-wrap: wrap;font-size: var(--title-20);font-family: var(--font-type02);margin-top: 48px;letter-spacing: 0;}
    #footer .btm_desc dt{font-size: 90%;font-weight: 300;color: var(--border-color02);line-height: 2;display: flex;flex-wrap: wrap; gap: 0 5px;}
    #footer .link_list{display: flex;}
    #footer .link_list > li{display: flex; align-items: center; font-size: var(--title-20);}
        #footer .link_list > li:not(:last-child):after{display:inline-flex; content:''; width: 3px; height: 3px; border-radius: 100%; background: var(--point-white); margin:0 10px;}
    #footer .link_list > li > a{font-size: 90%; font-weight: 200; color: var(--point-white);}
    #footer .link_list > li > a strong{font-weight: 400;}

    .scr_top{position: fixed;right: 23px;bottom: 23px;display: flex;width: 60px;height: 60px; z-index: 9; opacity: 0; pointer-events: none; transition: all 0.4s;}
        .scr_top:before{position: absolute; content:''; width: 0; height: 0; border-radius: 100%; top:50%; left:50%; transform: translate(-50%, -50%); transition: all 0.4s; background: var(--point-color01); box-shadow: 0 0 5px rgba(0,0,0,0.2);}
        .scr_top:after{position: absolute;content:'';width: 10px;height: 10px;border: 2px solid var(--trans-color);border-top-color: var(--point-white);border-right-color: var(--point-white);top: 55%;left:50%;transform: translate(-50%, -50%) rotate(-45deg);border-radius: 2px; z-index: 3;}

        #wrap:has(#header.on) .scr_top{opacity: 1; pointer-events: all;}
        #wrap:has(#header.on) .scr_top:before{width: 100%; height: 100%;}

    @media screen and (max-width:1023px){
        #footer{padding:50px 0 90px; margin-top: 80px;}
		#footer:before {height: 600px; background-size: auto 100%;}
        #footer .info{margin-top: 60px; padding-top: 45px;}
        #footer .btm_desc{margin-top: 43px;}
        #footer .exp_list > li{gap: 0 35px;}

        .scr_top{width: 55px; height: 55px;}
    }
    @media screen and (max-width:860px){
        #footer{padding:40px 0 80px;}
        #footer .logo_desc dt{height: 60px;}
        #footer .logo_desc dt object{width: auto; }
        #footer .info{margin-top: 55px; padding-top: 40px;}
        #footer .btm_desc{margin-top: 38px;}
        #footer .exp_list > li{gap: 0 30px;}

        .scr_top{width: 50px; height: 50px; right:15px; bottom:20px;}
    }
    @media screen and (max-width:640px){
        #footer{padding:30px 0 70px; margin-top: 60px;}
        #footer .logo_desc dt{height: 50px;}
        #footer .logo_desc dd{font-size: 140%;}
        #footer .info{margin-top: 50px; padding-top: 35px;}
        #footer .btm_desc{margin-top: 33px;}
        #footer .exp_list > li{gap: 0 25px;}

        .scr_top{width: 45px; height:45px; }
        .scr_top:after{width: 8px; height: 8px;}
    }
    @media screen and (max-width:479px){
        #footer .logo_desc dt{height: 40px;}
        #footer .logo_desc dd{font-size: 130%;}
        #footer .info{margin-top: 45px; padding-top: 30px;}
        #footer .btm_desc{margin-top: 30px;}
        #footer .exp_list > li{gap: 0 20px;}
        #footer .exp_list .desc :where(dt, dd), #footer .btm_desc dt{line-height: 1.8;}
    }