@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	" board｜errors｜goods｜service｜layout/board｜layout/display｜layout/goods "
	" layout/popup.html "

	위 폴더 및 페이지 커스텀 및 layout, navigation, button, company 관련 편집 css 파일 입니다.

	** header, footer, main 관련은 /css/skin.css 에 있습니다.

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

	공통

───────────────────────────────────────────────────────────*/
    #container:has(.full_sec){width: 100%; max-width: 100%;}
    .sub_content{font-family: var(--font-type01);}
    
    @media (max-width:1400px){
        br.for_pc{display: none;}
    }
    /* 상단 */
        .sub_visual{position: relative; background: url('../images/sub/sub_visual.jpg') no-repeat center / cover; width: 100%; box-sizing: border-box;}
        .sub_visual .txt_wrap{min-height: 560px;padding-block: 145px 100px;display: flex;flex-direction: column;align-items: flex-start;justify-content: center;font-size: var(--title-20);font-weight: 300;color: var(--point-white);gap: 23px;}
        .sub_visual .txt_wrap h2{font-size: 400%;font-weight: 700;line-height: 1.2;}
        .sub_visual .txt_wrap h6{font-size: 110%;font-weight: 300;line-height: 1.3;color: rgba(255,255,255,0.8);letter-spacing: -0.025em;}
        .sub_visual nav{position: absolute; left:50%; bottom:60px; translate: -50%; z-index: 2;}
        .sub_visual .nav_desc{display: flex; row-gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; font-size: var(--title-20); color: rgba(255,255,255,0.7);}
        .sub_visual .nav_desc dt{font-size: 0;}
        .sub_visual .nav_desc dt a { display: block; width: 20px; height: 18px; }
        .sub_visual .nav_desc :where(dt, dd){display: flex;align-items: center;}
            .sub_visual .nav_desc :where(dt, dd):after{display: inline-flex;content:'';width: 4px;aspect-ratio: auto 1;background: rgba(255,255,255,0.2);margin-inline: 16px;border-radius: 100%;}
            .sub_visual .nav_desc :where(dt, dd):last-child:after{display: none;}
        .sub_visual .nav_desc dd{font-size: 85%; font-weight: 300;}
        .sub_visual .nav_desc dd:last-child{color: var(--point-white);}

        @media (max-width:1023px){
            .sub_visual .txt_wrap{min-height: clamp(300px, 56vw, 560px);gap: clamp(12px, 2.3vw, 23px);padding-block: clamp(70px, 14vw, 145px) clamp(60px, 10vw, 100px);}
            .sub_visual .txt_wrap h2{font-size: clamp(40px, 8vw, 80px);}
            .sub_visual .txt_wrap h6{font-size: clamp(16px, 2.7vw, 22px);}
            .sub_visual nav{bottom:clamp(25px, 6vw, 60px);}
            .sub_visual .nav_desc :where(dt, dd):after{margin-inline: clamp(12px, 2.1vw, 16px);}
        }

        @media (max-width: 860px){
            .sub_visual .nav_desc dt a { width: 18px; height: 16px; }
        }
        @media (max-width:479px){
            .sub_visual .nav_desc :where(dt, dd):after{width: 3px;}
            .sub_visual .nav_desc dt a { width: 16px; height: 14px; }
        }

    /* 타이틀 */
        .hd_title{position: relative;font-size: var(--title-20);box-sizing: border-box;display: grid;gap: 20px;text-align: center;padding-block: 97px 59px;}
            .hd_title.hd_m{padding-block: 0 77px;margin-top: -21px;}
        .hd_title h3{font-size: 270%;font-weight: 600;color: var(--black-color01);letter-spacing: -0.03em;}
        .hd_title h4{font-size: 220%;font-weight: 600;color: var(--black-color01);letter-spacing: -0.03em; line-height: 1.36;}
        .hd_title h4 em{font-weight: inherit; color: var(--point-color02);}
        .hd_title h5{font-size: 140%;font-weight: 500;color: var(--black-color03);letter-spacing: -0.03em;line-height: 1.4;}
        .hd_title h5 strong{font-weight: 600;}

        .sub_title{position: relative;font-size: var(--title-20);color: var(--point-white);display: flex;align-items: flex-start;flex-direction: column;gap: 20px;box-sizing: border-box;}
            
        .sub_title h3{font-size: 220%;font-weight: 600;color: var(--black-color01);line-height: 1.2;letter-spacing: -0.03em;}
        .sub_title h4{font-size: 160%;font-weight: 600;color: var(--black-color01);line-height: 1.375;letter-spacing: -0.03em;}
        .sub_title h4 em{font-weight:inherit; color: var(--point-color02);}
        .sub_title h5{font-size: 140%;font-weight: 400;color: var(--black-color01);line-height: 1.6;letter-spacing: -0.03em;}
        .sub_title p{font-size: 90%;font-weight: 400;color: var(--black-color05);line-height: 1.56;letter-spacing: -0.03em;}

        @media (max-width:1023px){
            .hd_title{padding-block: clamp(70px, 9.7vw, 97px) clamp(30px, 6vw, 59px); gap: clamp(12px, 2vw, 20px);}
                .hd_title.hd_m{padding-bottom:clamp(35px, 7.7vw, 77px);margin-top: clamp(-21px, -2.1vw, 0px);}
            .hd_title h3{font-size: 250%;}
            .hd_title h4{font-size: 200%;}
            .hd_title h5{font-size: 130%;}

            .sub_title{gap: clamp(12px, 2vw, 20px);}
            .sub_title h3{font-size: 200%;}
            .sub_title h4{font-size: 150%;}
            .sub_title h5{font-size: 130%;}
        }
        @media (max-width:640px){
            .hd_title h3{font-size: 230%;}
            .hd_title h4{font-size: 180%;}
            .hd_title h5{font-size: 120%;}

            .sub_title h3{font-size: 180%;}
            .sub_title h4{font-size: 140%;}
            .sub_title h5{font-size: 110%;}
        }
        @media (max-width:479px){
            .hd_title h3{font-size: 210%;}
            .hd_title h4{font-size: 160%;}
            .hd_title h5{font-size: 110%;}

            .sub_title h3{font-size: 160%;}
            .sub_title h4{font-size: 130%;}
            .sub_title h5{font-size: 100%;}
        }

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

	company

───────────────────────────────────────────────────────────*/
    /* ceo */
        .ceo_bnr{position: relative;padding: 143px 20px 279px 0;}
        .ceo_bnr .thumb{position: absolute;top:0;right:0;width: calc(100% + 260px);height: 100%;overflow: hidden; border-radius:var(--radius-R60);}
        .ceo_bnr .thumb img{width: 100%; height: 100%; object-fit: cover;}
        .ceo_bnr .sub_title :where(h3, h5){filter: var(--filter-white);}
            .ceo_cont .sub_title.left{width: 40.4%;flex-shrink: 0;padding-right: 30px;}
        .ceo_cont{position: relative;padding: 80px;padding-bottom: 0;box-sizing: border-box;background: var(--point-white);margin-top: -145px;border-radius: var(--radius-L60);display: flex;align-items: flex-start;gap: 20px 0;}
        .ceo_cont .sub_title{width: 100%;}
        .ceo_cont .sign{display: flex; align-items:center; gap: 10px 14px; margin-top: 20px;}
        .ceo_cont .sign dt{font-size: inherit; font-weight: 500; color: var(--black-color01);}

        @media (max-width:1023px){
            .ceo_bnr{padding-block: clamp(80px, 14.4vw, 144px) clamp(120px, 28vw, 279px);}
            .ceo_cont{padding: clamp(30px, 7vw, 80px);padding-bottom: 0;margin-top: clamp(-145px, -14.5vw, -50px);}
            .ceo_cont .sub_title{gap: clamp(12px, 2vw, 20px);}
            .ceo_cont .sign{margin-top: clamp(12px, 2vw, 20px);}
        }
        @media (max-width:860px){
            .ceo_cont{flex-wrap: wrap;}
            .ceo_cont .sub_title.left{width: 100%; padding-right: 0;}
        }

    /* about */
        .about_cont{display: flex; gap:clamp(40px, 4.2vw, 80px); padding-bottom: 140px;}
        .about_cont .thumb{ position:relative; font-size: 0; width: 47.1%; border-radius: var(--radius-20); overflow: hidden; flex-shrink: 0;}
        .about_cont .thumb img{width: 100%; height: 100%; object-fit: cover;}
        .about_cont .thumb .thumb_logo { position: absolute; bottom: 0; right: 60px; width: 210px; aspect-ratio: 1 / 0.477; }
        .about_cont .thumb .thumb_logo::before { content: ''; display: block; width: 100%; height: 100%; background: url('../images/sub/about01_logo.svg') no-repeat center; background-size: 100% auto; }

        .tb_sec{position: relative; width: 100%; border-top: 1px solid var(--black-color01); box-sizing: border-box;}
        .tb_sec .desc{border-bottom: 1px solid var(--border-color01);box-sizing: border-box;display: flex;align-items: baseline;padding-block: 18px;font-size: var(--title-20);gap: 5px 0;}
        .tb_sec .desc :where(dt, dd){font-size: 90%;line-height: 1.56;letter-spacing: -0.03em;}
        .tb_sec .desc dt{width: 170px; flex-shrink: 0; padding-inline: 20px; font-weight: 500; color: var(--black-color03); box-sizing: border-box;}
        .tb_sec .desc dd{width: 100%;  font-weight: 400; color: var(--black-color05); box-sizing: border-box; padding-right: 15px; }
        .tb_sec .desc .icon_link{display: flex; flex-wrap: wrap; gap: 10px 22px;}
        .tb_sec .desc .icon_link a{display: flex; align-items: center; gap: 8px;}
        .tb_sec .desc .icon_link a img{flex-shrink: 0;}

        @media (max-width:1023px){
            .about_cont{flex-wrap: wrap; padding-bottom: clamp(70px, 14vw, 140px);}
            .about_cont .thumb{width: 100%;}
            
            .tb_sec .desc{padding-block: clamp(13px, 2.3vw, 18px);}
            .tb_sec .desc dt{width: clamp(140px, 17vw, 170px);padding-inline: clamp(15px, 2vw, 20px);}
            .tb_sec .desc dd { padding-right: clamp(10px, 1.5vw, 15px); }
        }

        @media (max-width:690px){
            .about_cont .thumb { width: 100%; }
            .about_cont .thumb .thumb_logo { width: clamp(120px, 21vw, 210px); right: clamp(30px, 6vw, 60px); }
        }

        @media (max-width:360px){
            .about_cont{flex-wrap: wrap;}
            
            .tb_sec .desc{flex-wrap: wrap;padding-inline: 15px;}
            .tb_sec .desc dt{width: 100%;flex-shrink: unset;padding-inline: 0;}
        }
    
        .about_vision{position: relative;background: url('../images/sub/about02.jpg') no-repeat center / cover;padding-block: 20px 120px;}
        .about_vision .hd_title :where(h3, h4){filter: var(--filter-white);}
        .about_vision .info_cont:before{display: block;content:'';width: 3px;height: 80px;background: var(--point-grai01);margin: -40px auto 60px;}
        .about_vision .exp_list{position: relative;display: flex;justify-content: center;padding: 25px 15px;box-sizing: border-box;}
            .about_vision .exp_list{&:before, &:after{position: absolute; content: ''; width: 100vw; height: 2px; background: rgba(255,255,255,0.4); top:50%; left:100%; margin-top: -1px;}}
            .about_vision .exp_list:after{left:auto; right:100%;}
        .about_vision .exp_list > li{width: 100%;aspect-ratio: auto 1;border: 2px solid rgba(255,255,255,0.4);border-radius: 100%;box-sizing: border-box;display: flex;align-items: center;justify-content: center;margin: -25px -15px;}
        .about_vision .exp_list .desc{display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;gap:10px;width: 77%;height: 77%;background: var(--point-white);border-radius: inherit;box-sizing: border-box;font-size: var(--title-20);padding: 20px;}
        .about_vision .exp_list .desc dt{font-size: 120%;font-weight: 600;color: var(--point-color02);line-height: 1.5;letter-spacing: -0.03em;}
        .about_vision .exp_list .desc dd{font-size: 85%;font-weight: 400;color: var(--black-color05);line-height: 1.59;letter-spacing: -0.03em;}

        @media (max-width:1300px){
            .about_vision .exp_list .desc{gap: clamp(7px, 1vw, 10px);}
            .about_vision .exp_list .desc dt{font-size: clamp(22px, 1.85vw, 24px);}
            .about_vision .exp_list .desc dd{font-size: clamp(14px, 1.3vw, 17px);}
        }
        @media (max-width:1023px){
            .about_vision{padding-block: clamp(0px, 2vw, 20px) clamp(70px, 12vw, 120px);}
            .about_vision .info_cont:before{margin-block: clamp(-40px, -4vw, 0px) clamp(30px, 6vw, 60px);height: clamp(40px, 8vw, 80px);}
            .about_vision .exp_list{flex-wrap: wrap;}
            .about_vision .exp_list > li{max-width: 280px;}
            .about_vision .exp_list{&:before, &:after{display: none;}}
        }
        @media (max-width:640px){
            .about_vision .exp_list > li{max-width: 250px;}
        }

        .about_miss{padding-block: 40px 140px;}
        .about_miss .circle{position: relative;width: fit-content;margin: -22px auto 0;}
        .about_miss .thumb{font-size: 0; text-align: center;}
        .about_miss .info_list > li{position: absolute;top: 3%;right: 73%;width: clamp(360px, 27vw, 450px);display: flex;align-items: center;flex-direction: row-reverse;text-align: right;gap: clamp(25px, 2.1vw, 40px);}
        .about_miss .info_list .icon{display: flex;align-items: center;justify-content: center;width: 140px;height: 140px;padding: 23px;box-sizing: border-box;background: var(--point-color03);border-radius: 100%;flex-shrink: 0;}
        .about_miss .info_list .desc{font-size: var(--title-20);display: grid;gap: 14px;}
        .about_miss .info_list .desc dt{font-size: 140%;font-weight: 600;color: var(--black-color03);letter-spacing: -0.03em;}
        .about_miss .info_list .desc dd{font-size: 90%;font-weight: 400;color: var(--black-color05);line-height: 1.55;letter-spacing: -0.03em;}

            .about_miss .info_list > li:nth-child(2n){right: auto;left: 73%;flex-direction: row;text-align: left;}
            .about_miss .info_list > li:nth-child(n+2):nth-child(-n+3) .icon{background: var(--point-color02);}
            .about_miss .info_list > li:nth-child(n+3){top:auto; bottom:3%;}

        @media (max-width:1023px){
            .about_miss{padding-block: clamp(0px, 4vw, 40px) clamp(70px, 14vw, 140px);}
            .about_miss .circle{width: 100%; margin-top: clamp(-22px, -2.2vw, 0px);}
            .about_miss .info_list{display: grid;grid-template: auto / repeat(2, 1fr);gap:clamp(15px, 4vw, 40px) 15px;margin-top: clamp(15px, 5vw, 50px);}
            .about_miss .info_list > li{position: relative; inset: auto !important; flex-direction: row; width: 100%; text-align: left;}
            .about_miss .info_list .icon{width: clamp(90px, 14vw, 140px);height: clamp(90px, 14vw, 140px);}
            .about_miss .info_list .desc{gap: clamp(10px, 1.4vw, 14px);}
        }
        @media (max-width:640px){
            .about_miss .info_list{grid-template: auto / repeat(1, 1fr);}
            .about_miss .info_list .desc dd br { display: none; }
            .about_miss .info_list > li:nth-child(3) { order: 4; }
            .about_miss .info_list > li:nth-child(4) { order: 3; }
        }
        @media (max-width:479px){
            .about_miss .info_list > li{gap: 20px;}
            .about_miss .info_list .desc dt{font-size: 130%;}
        }