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

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

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

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

    @media screen and (max-width:1600px) {
        #contents_wrap, .w_custom{width: calc(100% - 60px);}
    }
    @media screen and (max-width:860px) {
        #contents_wrap, .w_custom{width: calc(100% - 30px);}
    }
    @media screen and (max-width:640px) {
        #contents_wrap{padding-top:100px;}
    }
    @media screen and (max-width:479px) {
        #contents_wrap{padding-top:70px; padding-bottom: 120px;}
    }
    @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: 99; transition: all 0.4s;}
    #header .w_custom{display: flex;align-items: center;justify-content: space-between;max-width: 100%; height: 157px; transition: all 0.4s;}
    #header .logo{font-size: 0; height: 100%;}
    #header .logo a{display: flex;align-items: center;height: 100%;padding: 15px 0;box-sizing: border-box;}
    #header .gnb{position: absolute;top:0;left:50%;transform: translateX(-50%);display: flex;align-items: center;justify-content: center;text-align: center;width: calc(100% - 300px);height: 100%;}
    #header .gnb > li{position: relative; font-size: var(--title-20); height: 100%;}
    #header .gnb > li > a{display: flex;align-items: center;height: 100%;font-size: 150%;font-weight: 700;color: var(--point-color02);padding: 0 2vw;transition: all 0.4s;}
    #header .gnb .dep02{position: absolute; top:80%; left:50%; transform: translateX(-50%); background: var(--point-color01); box-shadow: 3px 3px 5px rgba(9, 22, 53, 0.1); width: max-content; min-width: 120px; padding:15px 0; opacity: 0; clip-path: inset(0 100% 0 0); transition: all 0.4s;}
    #header .gnb .dep02 > li > a{display: block; font-size: 85%;font-weight: 400;color: var(--point-white);padding: 7px 30px;opacity: 0.6;transition: all 0.4s;}
    #header .menu-trigger{display: flex;flex-direction: column;width: 30px;height: 22px;align-items: flex-end;justify-content: space-between;}
    #header .menu-trigger span{width: 100%; height: 2px; background: var(--point-color02);}
    #header .menu-trigger span:nth-child(2){width: 75%;}

        /* color */
            #header :where(.logo, .gnb > li > a, .menu-trigger){filter: var(--filter-white);}

        /* on */
            #header.on{background: var(--point-white); box-shadow: 3px 3px 5px rgba(9, 22, 53, 0.1);}
            #header.on :where(.logo, .gnb > li > a, .menu-trigger){filter: none;}
            #header.on .w_custom{height: 120px;}

        /* over */
            @media screen and (min-width:1024px){
                #header:hover{background: var(--point-white);}
                #header:hover :where(.logo, .gnb > li > a, .menu-trigger){filter: none;}
                #header .gnb > li:hover > a{color: var(--point-color01);}
                #header .gnb > li:hover .dep02{opacity: 1; clip-path: inset(0 0 0 0);}
                #header .gnb .dep02 > li > a:hover{opacity: 1;}
            }

    @media screen and (max-width:1400px){
        #header .gnb > li > a{font-size: 120%; padding: 0 1.5vw;}
    }
    @media screen and (max-width:1100px){
        #header .gnb > li > a{font-size: 110%;}
    }
    @media screen and (max-width:1023px){
        #header .w_custom{height: 120px;}
            #header.on .w_custom{height: 100px;}
        #header .gnb{display: none;}
    }
    @media screen and (max-width:860px){
        #header .w_custom{height: 110px;}
            #header.on .w_custom{height: 90px;}
    }
    @media screen and (max-width:640px){
        #header .w_custom{height: 100px;}
            #header.on .w_custom{height: 80px;}
        #header .menu-trigger{width: 26px; height: 20px;}
    }
    @media screen and (max-width:479px){
        #header .w_custom{height: 90px;}
            #header.on .w_custom{height: 70px;}
    }

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

	Aside | outline/nav.html

───────────────────────────────────────────────────────────*/
    #aside{position: fixed;top:0;left:0;width: 100%;height: 100%;z-index: 99;background: rgba(0,0,0,0.8);backdrop-filter:blur(10px);display: flex;flex-direction: column;overflow: hidden;overflow-y: auto;padding: 16vh 0;box-sizing: border-box; opacity: 0; clip-path: inset(0 100% 0 0); transition: all 0.6s;}
        #aside.on{opacity: 1; clip-path: inset(0 0 0 0);}
        body:has(#aside.on){overflow: hidden; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;}
    #aside .gnb{width: 100%;font-size: var(--title-20);}
    #aside .gnb > li{display: flex; align-items: center; justify-content: space-between; gap: 30px; color: var(--point-white); border-bottom: 1px solid rgba(255,255,255,0.2)}
    #aside .gnb > li > a{display: block; font-size: 240%; font-weight: 500; line-height: 1.2; padding:30px 0; flex-shrink: 0; transition: all 0.4s;}
    #aside .gnb .dep02{display: flex; flex-wrap: wrap;}
    #aside .gnb .dep02 > li > a{display: inline-block; font-size: 100%; font-weight:400; padding:10px 0; transition: all 0.4s; opacity: 0.6;}
    #aside .gnb .dep02 > li:not(:last-child):after{display: inline-flex; content:'/'; margin:0 20px; opacity: 0.6;} 
    #aside .close_btn{position: absolute;top: 50px;right: 50px;width: 40px;height: 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(--point-white);}
    #aside .close_btn span + span{transform: translate(-50%, -50%) rotate(-45deg);}

        /* over */
        @media screen and (min-width:1024px){
            #aside .gnb > li:hover > a{color: var(--point-color01);}
            #aside .gnb .dep02 > li > a:hover{opacity: 1;}
        }

    @media screen and (max-width:1600px){
        #aside .close_btn{top:30px; right: 30px;}
    }
    @media screen and (max-width:1023px){
        #aside .close_btn{width: 35px; height: 35px;}
    }
    @media screen and (max-width:860px){
        #aside{padding:70px 0;}
        #aside .gnb > li{display: block; padding: 20px 0;}
        #aside .gnb > li > a{width: 100%; padding:0;}
        #aside .gnb .dep02{margin-top: 10px;}
        #aside .close_btn{top:15px; right: 15px; width: 30px; height: 30px;}
    }
    @media screen and (max-width:640px){
        #aside .gnb > li > a{font-size: 220%;}
        #aside .gnb .dep02 > li > a{padding:7px 0;}
    }
    @media screen and (max-width:479px){
        #aside{padding:50px 0;}
        #aside .gnb > li{padding: 15px 0;}
        #aside .gnb > li > a{font-size: 200%;}
        #aside .gnb .dep02{margin-top: 5px;}
    }


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

	MAIN | index.html

───────────────────────────────────────────────────────────*/
    #wrap:has(.main_visual) #contents_wrap{width: 100%; max-width: 100%; padding: 0;}
    #wrap:has(.main_visual) #footer{border-top: 0;}
    #wrap .swiper_arw:after{display:none;}

    /* 비주얼 */
        .main_visual {position:relative;width:100%; box-sizing: border-box; background: var(--black-color00);}
        .main_visual .slick-slide {position: relative; height: 980px; overflow: hidden; box-sizing: border-box; }
        .main_visual .thumb{position: relative; width: 100%; height: 100%; background: no-repeat center / cover; opacity: 0.6; transform: scale(1.1); transition: all 8s; transition-timing-function: linear;}
            .main_visual .active .thumb{transform: scale(1);}
        .main_visual .txt_box{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); text-align: center; font-size: var(--title-20); color: var(--point-white); z-index: 3;}
        .main_visual .txt_box h2{font-size: 350%; font-weight: 600; line-height: 1.14;}
        .main_visual .txt_box h5{font-size: 150%; font-weight:400; line-height: 1.4;}
            .main_visual .txt_box h5 + h2{margin-top: 8px;}
        .main_visual .txtAni{transform: translateY(70px); opacity: 0; transition: all 1.2s; transition-delay: 0.2s;}
            .main_visual .active .txtAni{transform: translate(0); opacity: 1;}
        .main_visual .slick-dots{position: absolute; left:50%; bottom:60px; font-size: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; transform: translateX(-50%);}
        .main_visual .slick-dots li{position: relative; width: 5px; height: 5px; background: rgba(255,255,255,0.3); cursor: pointer; transition: all 0.4s;}
            .main_visual .slick-dots li.slick-active{width: 80px;}
        .main_visual .slick-dots li button{position: absolute; top:0; left:0; width: 0; height: 100%; font-size: 0;}
        .main_visual .slick-dots li.slick-active button{background: var(--point-color01);}
        .main_visual .scr_dwn{position: absolute;right: 4.2%;bottom:0;display: flex;align-items: center;gap: 20px;writing-mode: tb-rl;cursor: pointer;}
        .main_visual .scr_dwn dt{font-size: var(--title-14);font-weight: 400;color: rgba(255,255,255,0.5);letter-spacing: 0; transition: all 0.4s;}
        .main_visual .scr_dwn dd{position: relative;width: 2px;height: 80px;background: rgba(255,255,255,0.5); overflow: hidden;}
            .main_visual .scr_dwn dd:before{position: absolute; content:''; top:-50%; left:0; width: 100%; height: 25%;  background:var(--point-white);}

            .main_visual .scr_dwn dd:before{animation-name: scrDwn; animation-duration:3s; animation-iteration-count:infinite; transition-timing-function:linear;}
            @keyframes scrDwn {0% {top:-50%}100% {top:150%;}}

            /* over */
                @media screen and (min-width:1024px){
                    .main_visual .scr_dwn:hover dt{color: rgba(255,255,255,1);}
                }
        
        @media screen and (max-width:1600px){
            .main_visual .scr_dwn{right:30px;}
        }
        @media screen and (max-width:1023px){
            .main_visual .slick-slide{height: 95.6vw; min-height: 600px;}
            .main_visual .slick-dots{bottom: 40px;}
        }
        @media screen and (max-width:860px){
            .main_visual .txt_box h2{font-size: 320%;}
            .main_visual .txt_box h5{font-size: 140%;}
            .main_visual .slick-dots{bottom: 30px;}
            .main_visual .slick-dots li.slick-active{width: 70px;}
            .main_visual .scr_dwn{right:15px;}
            .main_visual .scr_dwn dd{height: 70px;}
        }
        @media screen and (max-width:640px){
            .main_visual .txt_box h2{font-size: 290%;}
            .main_visual .txt_box h5{font-size: 130%;}
            .main_visual .slick-dots{bottom: 30px;}
            .main_visual .slick-dots li{width: 4px; height: 4px;}
            .main_visual .slick-dots li.slick-active{width: 60px;}
            .main_visual .scr_dwn{gap:15px;}
            .main_visual .scr_dwn dd{height: 60px;}
        }
        @media screen and (max-width:479px){
            .main_visual .txt_box h2{font-size: 260%;}
            .main_visual .txt_box h5{font-size: 120%;}
            .main_visual .slick-dots{bottom: 25px;}
            .main_visual .slick-dots li.slick-active{width: 50px;}
            .main_visual .scr_dwn dd{height: 50px;}
        }
        @media screen and (max-width:431px){
            .main_visual .txt_box h2{font-size: 230%;}
            .main_visual .slick-dots{bottom: 20px;}
        }

    /* 공통 */
        .main_title{position: relative; font-size: var(--title-20); box-sizing: border-box;}
            .main_title.cen{text-align: center;}
            .main_title.hd{margin-bottom: 65px;}
            .main_title.hd_m{margin-bottom: 40px;}
        .main_title h2{font-size: 330%;font-weight: 700;color: var(--point-color02);line-height: 1.2;letter-spacing: -0.03em;}
            .main_title h2 + h6{margin-top: 24px;}
        .main_title h6{font-size: 120%; font-weight: 400; color: var(--point-color02); line-height: 1.41;}
        .main_sec{position: relative; padding: 128px 0 140px;}
        .more_view{position: relative;display: inline-block;font-size: var(--title-20);border-radius: 50px;overflow: hidden;box-shadow: inset 0 0 0 1px var(--point-color05); transition: all 0.4s;}
            .more_view:before{position: absolute;content:'';top:50%;left:50%;transform: translate(-50%, -50%);background: var(--point-white);width: 0;height: 0;border-radius: inherit;transition: all 0.4s;}
        .more_view span{position: relative;display: flex;align-items: center;width: 240px;height: 60px;justify-content: space-between;font-size: 90%;font-weight: 600;color: var(--point-color05);padding: 2px 30px 0;box-sizing: border-box;}
        .more_wrap{display: flex;flex-wrap: wrap;gap: 15px;justify-content: center;}
        .more_view span:after{display: inline-flex; content:''; width: 12px; height: 12px; background: url('../images/skin/plus_sm.svg') no-repeat center / 100% auto;}
        
            /* over */
                @media screen and (min-width:1024px){
                    .more_view:hover{box-shadow: inset 0 0 0 1px var(--point-white);}
                    .more_view:hover:before{height: 100%;width: 100%;}
                }
        

        @media screen and (max-width:860px){
            .main_title.hd{margin-bottom: 55px;}
            .main_title h2{font-size: 300%;}
                .main_title h2 + h6{margin-top: 20px;}
            .main_sec{padding: 108px 0 120px;}
            .more_view span{width: 220px;}
        }
        @media screen and (max-width:640px){
            .main_title.hd{margin-bottom: 45px;}
            .main_title h2{font-size: 270%;}
                .main_title h2 + h6{margin-top: 15px;}
            .main_title h6{font-size: 110%;}
            .main_sec{padding: 88px 0 100px;}
            .more_view span{width: 200px; height: 55px;}
        }
        @media screen and (max-width:479px){
            .main_title.hd{margin-bottom: 35px;}
            .main_title h2{font-size: 240%;}
                .main_title h2 + h6{margin-top: 10px;}
            .main_title h6{font-size: 100%;}
            .main_sec{padding: 58px 0 70px;}
            .more_view span{width: 180px;height: 50px;padding: 2px 25px 0;}
        }

    /* What We Do */
        .main_do{background: var(--point-color03);overflow: hidden;}
            .main_do:before{position: absolute;content:'';width: 760px;height: 760px;background: var(--point-color04);border-radius: 100%; filter: blur(100px); top:50%;left:50%;transform: translate(-50%, -50%);opacity: 0.1;}
        .main_do .main_title :where(h2, h6){filter: var(--filter-white);}
        .main_do .info_list{position: relative;display: flex;flex-wrap: wrap;padding: 80px 9vw;box-sizing: border-box; gap: 60px 0;}
            .main_do .info_list:before{position: absolute; content:''; width: 0; height: 100%; border-radius: 0;border: 1px solid rgba(255, 255, 255, 0.2);background: rgba(2, 10, 19, 0.5); box-sizing: border-box; top:0; left:50%; transform: translateX(-50%);}
            .main_do .info_list.aos-animate:before{width: 100%; border-radius: 500px; transition: all 1.5s;}
        .main_do .info_list > li{position: relative; text-align: center;box-sizing: border-box;width: calc(100% / 3);padding: 0 20px; transform: translateY(200px); opacity: 0; }
            .main_do .info_list.aos-animate > li{transform: translate(0); opacity: 1; transition:all 1.5s; transition-delay: 0.4s;}
            .main_do .info_list.aos-animate > li:nth-child(2){transition-delay: 0.6s;}
            .main_do .info_list.aos-animate > li:nth-child(3){transition-delay: 0.8s;}
        .main_do .info_list .icon{display: flex; height: 83px; justify-content: center;}
            .main_do .info_list .icon + .desc{margin-block-start: 29px;}
        .main_do .info_list .desc{font-size: var(--title-20); color: var(--point-white);}
        .main_do .info_list .desc dt{font-size: 170%;font-weight: 400;line-height: 1.3;letter-spacing: -0.03em;}
            .main_do .info_list .desc dt + dd{margin-top: 13px;}
        .main_do .info_list .desc dd{font-size: 120%;font-weight: 300;line-height: 1.4;letter-spacing: -0.03em;opacity: 0.7;}
        @media screen and (max-width:1400px){
            .main_do .info_list .desc dt{font-size: 150%;}
            .main_do .info_list .desc dd{font-size: 100%;}
        }
        @media screen and (max-width:1023px){
            .main_do .info_list > li{width: 100%; padding:0;}
            .main_do .info_list.aos-animate:before{border-radius: 40px;}
        }
        @media screen and (max-width:860px){
            .main_do:before{display: none;}
            .main_do .info_list .icon + .desc{margin-top: 25px;}
        }
        @media screen and (max-width:640px){
            .main_do .info_list{padding:70px 30px;}
            .main_do .info_list.aos-animate:before{border-radius: 20px;}
            .main_do .info_list .icon{height: 70px;}
                .main_do .info_list .icon + .desc{margin-top: 20px;}
            .main_do .info_list .desc dt + dd{margin-top: 8px;}
        }
        @media screen and (max-width:479px){
            .main_do .info_list{padding:60px 30px;}
            .main_do .info_list .icon{height: 60px;}
        }

    /* What We Are Publishing */
        .main_pub .exp_list{display: flex; flex-wrap: wrap; gap: 55px;}
        .main_pub .exp_list > li{position: relative; width: calc(100% / 3 - 36.67px); overflow: hidden; box-sizing: border-box;}
        .main_pub .exp_list .thumb{position: relative;display: block;font-size: 0;padding-bottom: 118.2%;}
            .main_pub .exp_list .thumb:before{position: absolute; content:''; top:0; left:0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(9, 22, 53, 0.30) 0%, #091635 100%); z-index: 3; clip-path: inset(0 100% 0 0); opacity: 0; transition: all 0.6s;}
        .main_pub .exp_list .thumb img{position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover;}
        .main_pub .exp_list .desc{position: absolute;top:0;left:0;width: 100%;height: 100%;padding: 45px 30px;font-size: var(--title-20);color: var(--point-white);box-sizing: border-box; z-index: 5;}
        .main_pub .exp_list .desc dt{font-size: 160%;font-weight: 600;line-height: 1.25;letter-spacing: -0.02em;}
            .main_pub .exp_list .desc dt + dd{margin-top: 46px;}
        .main_pub .exp_list .desc dd{display: flex;flex-direction: column;gap: 9px; clip-path: inset(0 100% 0 0); opacity: 0; transition: all 0.6s; }
        .main_pub .exp_list .desc dd span{font-size: 90%; font-weight: 300;}
        .main_pub .exp_list .his_list > li{display: flex; align-items: baseline; gap: 0 10px; font-weight: 400; line-height: 1.5;}
        .main_pub .exp_list .his_list > li em{position: relative;flex-shrink: 0;width: 52px;font-weight: inherit;}
            .main_pub .exp_list .his_list > li em:before{position: absolute;content:'';top:50%;right:0;transform: translateY(-50%);width: 1px;height: 40%;background: var(--point-white);}
        .main_pub .exp_list .arw{position: absolute; right:30px; bottom:30px; width: 60px; height: 60px; background: var(--point-color01); border-radius: 100%; display: flex; align-items: center; justify-content: center; z-index: 4; opacity: 0; transform: translate(100%, 100%); transition: all 0.6s;}
        .main_pub .exp_list .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 7;}

            /* over */
                @media screen and (min-width:1024px){
                    .main_pub .exp_list > li:hover .thumb:before{clip-path: inset(0 0 0 0); opacity: 1;}
                    .main_pub .exp_list > li:hover .desc dd{clip-path: inset(0 0 0 0); opacity: 1; transition-delay: 0.2s;}
                    .main_pub .exp_list > li:hover .arw{transform: translate(0); opacity: 1; transition-delay: 0.2s;}
                }

        @media screen and (max-width:1600px){
            .main_pub .exp_list{ gap: 40px;}
            .main_pub .exp_list > li{width: calc(100% / 3 - 26.67px);}
        }
        @media screen and (max-width:1400px){
            .main_pub .exp_list{ gap: 30px;}
            .main_pub .exp_list > li{width: calc(100% / 3 - 20px);}
            .main_pub .exp_list .thumb{padding-bottom: 500px;}
            .main_pub .exp_list .desc{padding: 40px 30px;}
                .main_pub .exp_list .desc dt + dd{margin-top: 40px;}
        }
        @media screen and (max-width:1200px){
            .main_pub .exp_list{ gap: 20px;}
            .main_pub .exp_list > li{width: calc(100% / 3 - 13.34px);}
            .main_pub .exp_list .desc{padding: 35px 30px;}
                .main_pub .exp_list .desc dt + dd{margin-top: 35px;}
            .main_pub .exp_list .arw{width: 55px; height: 55px; right:25px; bottom:25px;}
        }
        @media screen and (max-width:1023px){
            .main_pub .exp_list{ gap: 15px;}
            .main_pub .exp_list > li{width: calc(100% / 2 - 7.5px);}
            .main_pub .exp_list .thumb{padding-bottom: 118.2%;}
        }
        @media screen and (max-width:640px){
            .main_pub .exp_list .desc{padding:30px;}
            .main_pub .exp_list .desc dt{font-size: 140%; line-height: 1.2;}
        }
        @media screen and (max-width:479px){
            .main_pub .exp_list > li{width: 100%;}
        }

    /* Who We Are */
        .main_are{background: var(--gray-bg01); overflow: hidden;}
        .main_are .profileSwiper{position: relative; box-sizing: border-box;}
        .main_are .profileSwiper .swiper-slide{position: relative;border: 1px solid var(--border-color01);background: var(--point-white);padding: 50px 50px 45px; height: auto; box-sizing: border-box;text-align: center; transition: all 0.4s;}
        .main_are .profileSwiper .thumb{position: relative;}
            .main_are .profileSwiper .thumb + .desc{margin-top: 27px;}
        .main_are .profileSwiper .thumb dt{position: relative; width: 100%; padding-bottom: 100%; border-radius: 100%; overflow: hidden;}
        .main_are .profileSwiper .thumb dt img{position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover;}
        .main_are .profileSwiper .thumb dd{position: absolute;right: 7px;bottom: 13px;width: 55px;height: 55px;border-radius: 100%;background: var(--point-color05);display: flex;align-items: center;justify-content: center; transform: translate(100%, 100%); opacity: 0; transition: all 0.4s;}
        .main_are .profileSwiper .desc{font-size: var(--title-20); color: var(--point-color02);}
        .main_are .profileSwiper .desc dt{font-size: 170%;font-weight: 700;line-height: 1.3;letter-spacing: -0.03em;}
        .main_are .profileSwiper .desc dt + dd{margin-top: 7px;}
        .main_are .profileSwiper .desc dd{font-size: 90%; font-weight: 500; line-height: 1.5; opacity: 0.4;}
        .main_are .profileSwiper .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        .main_are .profileSwiper .controller{position: relative;display: flex;align-items: center;gap: 40px;margin-top: 60px;}
        .main_are .profileSwiper .swiper-pagination{position: relative; top:auto; left:auto; width: calc(100% - 140px); height: 4px; background: var(--border-color01);}
        .main_are .profileSwiper .swiper-pagination span{position: absolute; top:0; left:0; width: 100%; height: 100%; background: var(--point-color02);}
        .main_are .profileSwiper .arw_wrap{width: 100px;display: flex;align-items: center;justify-content: space-between;}
        .main_are .profileSwiper .swiper_arw{position: relative; top:auto; left:auto; right:auto; bottom:auto; margin:0; width: 30px; height: 30px; background: url('/data/skin/respon_default_en/images/skin/arw.svg') no-repeat center; transition: all 0.4s;}
            .main_are .profileSwiper .swiper_arw.swiper-button-next{transform: scale(-1, -1);}
        .main_are .profileSwiper .line{display:inline-flex; width: 2px;height: 12px;background: var(--gray-bg02); font-size: 0;}

            /* over */
                @media screen and (min-width:1024px){
                    .main_are .profileSwiper .swiper-slide:hover{box-shadow: 0 0 50px rgba(9, 22, 53, 0.1);}
                    .main_are .profileSwiper .swiper-slide:hover .thumb dd{transform: translate(0); opacity: 1;}
                    .main_are .profileSwiper .swiper_arw:hover{filter: brightness(0);}
                }

        @media screen and (max-width:1200px){
            .main_are .profileSwiper .swiper-slide{padding:45px 45px 40px;}
            .main_are .profileSwiper .thumb + .desc{margin-top: 22px;}
        }
        @media screen and (max-width:1023px){
            .main_are .profileSwiper .swiper-slide{padding:40px 40px 35px;}
            .main_are .profileSwiper .thumb + .desc{margin-top: 22px;}
            .main_are .profileSwiper .controller{margin-top: 50px;}
        }
        @media screen and (max-width:860px){
            .main_are .profileSwiper .swiper-slide{padding:35px 35px 30px;}
            .main_are .profileSwiper .thumb + .desc{margin-top: 17px;}
            .main_are .profileSwiper .controller{margin-top: 40px;}
        }
        @media screen and (max-width:640px){
            .main_are .profileSwiper .swiper-slide{padding:30px 30px 25px;}
            .main_are .profileSwiper .controller{margin-top: 30px; gap: 30px;}
            .main_are .profileSwiper .swiper-pagination{width: calc(100% - 120px); height: 3px;}
            .main_are .profileSwiper .arw_wrap{width: 90px;}
        }
        @media screen and (max-width:479px){
            .main_are .profileSwiper .controller{margin-top: 20px; gap: 25px;}
            .main_are .profileSwiper .swiper-pagination{width: calc(100% - 105px);height: 3px;}
            .main_are .profileSwiper .arw_wrap{width: 80px;}
            .main_are .profileSwiper .swiper_arw{width: 26px;height: 26px;background-size: 100% auto;}
        }

    /* Latest News */
        .main_news{background: url('../images/skin/main_news.jpg') no-repeat center / cover;}
        .main_news .main_title h2{filter: var(--filter-white);}
        .main_news .board_list{display: flex; flex-wrap: wrap; gap: 40px;}
        .main_news .board_list > li{position: relative;border: 1px solid rgba(255, 255, 255, 0.2);background: rgba(2, 10, 19, 0.5);width: calc(100% / 3 - 26.67px);font-size: var(--title-20);padding: 35px 40px 40px;box-sizing: border-box; transition: all 0.4s;}
        .main_news .board_list .preface{font-size: 110%; font-weight: 500; color: var(--point-color01); line-height: 1.4;}
        .main_news .board_list .preface + .desc{margin-top: 8px;}
        .main_news .board_list .desc{color: var(--point-white);}
        .main_news .board_list .desc dt{font-size: 160%; font-weight: 400; line-height: 1.31; white-space:normal; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
            .main_news .board_list .desc dt + dd{margin-top: 19px;}
        .main_news .board_list .desc dd{font-size: 100%;font-weight: 200;line-height: 1.5;white-space:normal;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;letter-spacing: 0;}
        .main_news .board_list .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        .main_news .more_wrap{margin-top: 80px;}

            /* over */
                @media screen and (min-width:1024px){
                    .main_news .board_list > li:hover{border-color: var(--point-white); background: rgba(2, 10, 19, 1);}
                }

        @media screen and (max-width:1400px){
            .main_news .board_list{gap: 30px;}
            .main_news .board_list > li{width: calc(100% / 3 - 20px);}
        }
        @media screen and (max-width:1200px){
            .main_news .board_list{gap: 20px;}
            .main_news .board_list > li{width: calc(100% / 3 - 13.34px);}
        }
        @media screen and (max-width:1023px){
            .main_news .board_list{gap: 15px;}
            .main_news .board_list > li{width: calc(100% / 3 - 10px); padding:30px 35px 35px;}
            .main_news .board_list .desc dt{font-size: 150%;}
            .main_news .more_wrap{margin-top: 70px;}
        }
        @media screen and (max-width:860px){
            .main_news .board_list > li{width: calc(100% / 2 - 7.5px); }
            .main_news .more_wrap{margin-top: 60px;}
        }
        @media screen and (max-width:640px){
            .main_news .board_list > li{padding:25px 30px 30px;}
            .main_news .board_list .desc dt{font-size: 140%;}
                .main_news .board_list .desc dt + dd{margin-top: 15px;}
            .main_news .board_list .desc dd{font-size: 90%;}
            .main_news .more_wrap{margin-top: 50px;}
        }
        @media screen and (max-width:479px){
            .main_news .board_list > li{width: 100%; }
            .main_news .more_wrap{margin-top: 40px;}
        }

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

	FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative; padding: 60px 0; box-sizing: border-box; border-top: 1px solid var(--border-color01);}
    #footer .cont{display: flex; flex-wrap: wrap; padding-right: 300px; box-sizing: border-box;} 
    #footer .logo{font-size: 0; width: 138px;}
    #footer .info{width: calc(100% - 138px);padding-left: 70px;display: flex;flex-wrap: wrap;gap: 6px 40px;box-sizing: border-box;font-size: var(--title-20);}
    #footer .info .desc{display: flex; gap:24px;}
    #footer .info .desc dt{font-weight: 700; color: var(--black-color05); flex-shrink: 0;}
    #footer .info .desc dd{font-weight: 400; color: var(--black-color06);}
    #footer .info .copy{display: flex;flex-wrap: wrap;gap:3px 20px;font-size: var(--title-20);width: 100%;margin-top: 24px;}
    #footer .info .copy :where(dt, dd){font-size: 80%; font-weight: 400; color: var(--black-color08); line-height: 1.6;}
    #footer .link_wrap{position: absolute;top:0;right:0;display: flex;flex-direction: column;align-items: flex-end;gap: 38px;}
    #footer .family_site{position: relative; font-size: var(--title-20);}
    #footer .family_site dt{position: relative; z-index: 3;}
    #footer .family_site dt span{position: relative;font-size: 90%;font-weight: 500;color: var(--black-color03);display: flex;align-items: center;width: 240px;height: 55px;border: 1px solid var(--border-color01);border-radius: 50px;padding: 2px 55px 0 24px;box-sizing: border-box;background: var(--point-white);cursor: pointer;transition: all 0.4s;}
        #footer .family_site dt span:before{position: absolute;content:'';border: 4px solid var(--trans-color);border-top: 6px solid var(--black-color03);top: 54%;right: 26px;transform: translateY(-50%);transition: all 0.4s;}
        #footer .family_site dt.on span:before{top:46%; transform: translateY(-50%) scale(-1,-1);}
    #footer .family_site dd{position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; border: 1px solid var(--border-color01); border-radius: 10px; padding:15px 0; box-sizing: border-box; background: var(--point-white); box-shadow: 3px 3px 5px rgba(9, 22, 53, 0.1); opacity: 0; pointer-events: none; transition: all 0.4s;}
        #footer .family_site dt.on + dd{opacity: 1; pointer-events: all;}
    #footer .family_site dd a{display: block; font-size: 80%; font-weight: 400; color: var(--point-color02); padding:7px 20px; transition: all 0.4s;}
	#footer .link_list{display:flex; justify-content:flex-end;}
	#footer .link_list > li{display:flex;align-items:center;font-size:var(--title-20);letter-spacing: -0.01em;}
		#footer .link_list > li:not(:last-child):after{display:inline-flex;content:'';width:1px;height:10px;background:var(--border-color01);margin: 0 20px;}
	#footer .link_list > li > a{font-weight:400; color:var(--black-color03);}
	#footer .link_list > li > a strong{font-weight:700; color:var(--point-color05);}
        
        /* over */
            @media screen and (min-width:1024px){
                #footer .family_site:hover dt span{border-color: var(--point-color02);}
                #footer .family_site dd a:hover{color: var(--point-color01);}
            }

	@media screen and (max-width:1023px){
        #footer .cont{padding-right: 0;}
        #footer .info{padding-left: 50px;}
		#footer .link_wrap{position:relative; top:auto; right:auto; margin-top: 30px; width: 100%; align-items: flex-start; gap: 30px;}
	}
    @media screen and (max-width:860px){
        #footer .logo{width: 100%; height: 70px;}
        #footer .info{width: 100%; padding: 30px 0 0; column-gap: 35px;}
        #footer .info .desc{gap: 20px;}
        #footer .info .copy{margin-top: 20px;}
        #footer .link_wrap{gap: 25px;}
        #footer .family_site dt span{width: 220px;height: 50px;padding: 1px 50px 0 20px;}
            #footer .family_site dt span:before{right:22px;}
        #footer .family_site dd{padding:10px 0;}
	}
    @media screen and (max-width:640px){
        #footer{padding:50px 0;}
        #footer .logo{height: 60px;}
        #footer .info{padding: 25px 0 0; column-gap: 30px;}
        #footer .info .copy{margin-top: 15px;}
        #footer .link_wrap{gap: 20px; margin-top: 25px;}
        #footer .family_site dt span{width: 200px; height: 50px;}
        #footer .link_list > li:not(:last-child):after{margin:0 15px;}
	}
    @media screen and (max-width:479px){
        #footer{padding:40px 0;}
        #footer .logo{height: 50px;}
        #footer .info{padding: 20px 0 0; column-gap: 25px;}
        #footer .info .desc{gap: 15px;}
        #footer .info .copy{margin-top: 10px;}
        #footer .link_wrap{margin-top: 20px;}
        #footer .family_site dt span{width: 180px; height: 45px;}
        #footer .link_list > li:not(:last-child):after{margin:0 15px;}
	}