@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 에 있습니다.

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








/*───────────────────────────────────────────────────────────
	
	common.css 커스텀 css 아래에 작성

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

/*───────────────────────────────────────────────────────────
	button common
───────────────────────────────────────────────────────────*/
    .btn, .btn_lg, .btn_sm, .btn_md {position: relative;display: inline-flex;align-items: center;justify-content: center;border:1px solid;font-weight: 600;box-sizing: border-box;font-family: var(--font-type02);color: var(--black-color00); line-height: 1.2; border-radius: 4px; overflow: hidden;}

    .btn_wd {width:100%;height:50px;line-height:48px;font-size:17px;}
    .btn {min-width: 180px;height: 60px;padding: 0 20px;font-size: 110%;}
    .btn_lg {width:92px;height:72px;line-height:70px;font-size:14px;}
    .btn_md {width:60px;line-height:28px;height:30px;font-size:13px;}
    .btn_sm {height:30px;line-height:28px;width:auto;padding:0 8px;font-size:inherit;border-color:#aaa;background-color:#aaa;color:#fff;}

    #wrap .btn_point{border-color: var(--point-color01);background-color: var(--point-color01);}
    #wrap .btn_wh{border-color: var(--point-white);background-color: var(--point-white);color: var(--black-color00);}
    #wrap .btn_basic{border-color:#777;background-color:#777;color:#fff;}
    #wrap .btn_default{border-color:#aaa;background-color:#aaa;color:#fff;}
    #wrap .btn_info{border-color:#d3d3d3;background-color:#fff;color:#555;}
    #wrap .btn_reset{border-color:#d3d3d3;background:#fff url('../images/common/icon_btn_reset.gif') no-repeat 9px 50%;padding:0 10px 0 30px;color:#555;}

    .btn_wrap {margin:0 auto;padding:60px 0 0;vertical-align:top;display:inline-flex; justify-content: center; flex-wrap: wrap; gap: 15px;font-size: var(--title-20);}
    .btn_wrap button > a, .btn_wrap a > a{margin-left:0;}
    .view_btn .btn_wrap.ta_right {position:absolute;right:0;top:0;}

    @media screen and (max-width:1023px) {
        .btn_wrap{padding-top: clamp(30px, 6vw, 60px);}
        .view_btn .btn_wrap.ta_left {position:absolute;left:0;top:0;}
        .btn {min-width: 170px;height: 55px;}
    }
    @media screen and (max-width:860px) {
        .btn {min-width: 160px;height: 50px;}
    }
    @media screen and (max-width:640px) {
        .btn {min-width: 150px;}
    }
    @media screen and (max-width:479px) {
        .btn_wrap{gap: 10px;}
        .btn {min-width: 130px;height: 45px; font-size: 100%;}
    }

/*───────────────────────────────────────────────────────────
	공통
───────────────────────────────────────────────────────────*/
    .nav_wrap{position: relative;font-size: var(--title-20);text-align: center; padding: 197px 0 60px;}
    .nav_wrap .w_custom{display: flex;flex-direction: column;gap: 30px;}
    .nav_wrap h2{font-size: 500%; font-weight: 800; color: var(--black-color00); line-height: 1.1;}
    .nav_wrap h5{font-size: 200%;font-weight: 400;color: var(--black-color00);line-height: 1.2;font-family: var(--font-type02);letter-spacing: -0.02em;text-transform: lowercase;}

    .sub_visual{position: relative; height: 700px; background: no-repeat center / cover; margin-bottom: 160px;}

    .sub_title{position: relative; font-size: var(--title-20); box-sizing: border-box;}
    .sub_title h2{font-size: 400%; font-weight: 700; color: var(--black-color00); line-height: 1.25;}
        .sub_title h2 + h6{margin-top: 36px;}
        .sub_title h2 + p{margin-top: 40px;}
    .sub_title h6{font-size: 150%; font-weight: 500; color: var(--black-color00); line-height: 1.3;}
        .sub_title h6 + p{margin-top: 25px;}
    .sub_title p{font-size: inherit; font-weight: 400; color: var(--black-color06); line-height: 2;}
        .sub_title p + p{margin-top: 40px;}

    

    @media screen and (max-width:1023px) {
        .nav_wrap {padding: clamp(70px, 19.7vw, 197px) 0 clamp(30px, 6vw, 60px);}
        .nav_wrap .w_custom{gap: clamp(15px, 3vw, 30px)}
        .nav_wrap h2{font-size: 470%;}
        .nav_wrap h5{font-size: 190%;}

        .sub_visual{height: clamp(200px, 70vw, 700px); margin-bottom: clamp(50px, 16vw, 160px);}

        .sub_title h2{font-size: 370%;}
        .sub_title h2 + h6{margin-top: clamp(10px, 3.6vw, 36px);}
        .sub_title h2 + p{margin-top: clamp(15px, 4vw, 40px);}
        .sub_title h6 + p{margin-top: clamp(8px, 2.5vw, 25px);}
        .sub_title p + p{margin-top: clamp(15px, 4vw, 40px);}
    }
    @media screen and (max-width:860px) {
        .nav_wrap h2{font-size: 440%;}
        .nav_wrap h5{font-size: 180%;}

        .sub_title h2{font-size: 340%;}
    }
    @media screen and (max-width:640px) {
        .nav_wrap h2{font-size: 410%;}
        .nav_wrap h5{font-size: 170%;}
        
        .sub_title h2{font-size: 300%;}
        .sub_title p{line-height: 1.8;}
    }
    @media screen and (max-width:479px) {
        .nav_wrap h2{font-size: 380%;}
        .nav_wrap h5{font-size: 160%;}

        .sub_title h2{font-size: 250%;}
        .sub_title p{font-size: 90%;}
    }

/*───────────────────────────────────────────────────────────
	company
───────────────────────────────────────────────────────────*/
    /* about */
        .sub_about .main_slogan{height: 700px; padding-inline: 100px; padding-bottom: clamp(20px, 3vw, 50px);width: calc(100% + 200px);margin-left: -100px;}
        .sub_about .main_slogan .thumb:before{position: absolute; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.4); top:0; left:0; opacity: 0;}
        .sub_about .main_slogan .thumb.aos-animate:before{opacity: 1; transition: all 1.2s; transition-delay: 0.4s;}
        .sub_about .main_slogan .main_title h3{font-size: 400%; font-weight: 700;}
        .sub_about .main_slogan .main_title h6{font-size: 120%;line-height: 1.41;}
		.sub_about .main_slogan .ani_list{gap: 20px;margin-top: 30px;}
        .sub_about .main_slogan .ani_list > li{font-size: 300%;font-weight: 400;}
		.sub_about .main_slogan .ani_list + h6{margin-top: 34px;}


        .sub_about .factory { margin-top: 140px; font-size: var(--title-20); }
        .sub_about .factory .img { height: 0; padding-bottom: 45%; overflow: hidden; position: relative; }
        .sub_about .factory .img img { width: 50%;
            height: 100%;
            object-fit: cover;
            /* position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; */
         }
        .sub_about .factory .img .img-wrapper {
                    display: flex;
                    gap: 20px;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
        .sub_about .factory .txt { margin-top: 40px; }
        .sub_about .factory h2 { font-size: 200%; margin-bottom: 20px; }
        .sub_about .factory p { font-weight: 400; color: var(--black-color06); line-height: 2; }

        .sub_about .factory a { display: flex ; align-items: center; justify-content: space-between; margin-top: 30px; width: 240px; height: auto; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.3); padding: 15px 30px; box-sizing: border-box; font-size: var(--title-18); font-weight: 400; color: var(--black-color06); line-height: 1.2; }

            @media screen and (max-width:1023px) {
                .sub_about .main_slogan{height: clamp(400px, 70vw, 700px);}
                .sub_about .main_slogan .main_title h3{font-size: 370%;}
                .sub_about .main_slogan .main_title h6{font-size: 110%;}
                .sub_about .main_slogan .ani_list{gap: clamp(10px, 2vw, 20px);margin-top: clamp(15px, 3vw, 30px);}
                .sub_about .main_slogan .ani_list > li{font-size: 280%;}

                
                .sub_about .factory .img { padding-bottom: clamp(250px, 40vw, 45%); }
                .sub_about .factory .img img { object-fit: cover; width: 50%; height: 100%; }
                .sub_about .factory .txt { margin-top: clamp(20px, 4vw, 40px); }
                .sub_about .factory h2 { font-size: 180%; margin-bottom: clamp(10px, 2vw, 20px); }
                .sub_about .factory a { width: clamp(160px, 24vw, 240px); padding: clamp(10px, 1.5vw, 15px) clamp(20px, 3vw, 30px);  }
            }
            @media screen and (max-width:860px) {
                .sub_about .main_slogan .main_title h3{font-size: 340%;}
                .sub_about .main_slogan .main_title h6{font-size: 100%;}
                .sub_about .main_slogan .ani_list > li{font-size: 260%;}

                .sub_about .factory h2 { font-size: 170%; }
            }
            @media screen and (max-width:640px) {
                .sub_about .main_slogan .main_title h3{font-size: 310%;}
                .sub_about .main_slogan .main_title h6{font-size: 90%;}
                .sub_about .main_slogan .ani_list > li{font-size: 240%;}

                .sub_about .factory h2 { font-size: 160%; }
                .sub_about .factory .img { height: auto; padding-bottom: clamp(600px, 40vw, 45%); }
                .sub_about .factory .img .img-wrapper { flex-direction: column; }
                .sub_about .factory .img img {  width: 100%; height: 50%; }
            }
            @media screen and (max-width:479px) {
                .sub_about .main_slogan .main_title h3{font-size: 280%;}
                .sub_about .main_slogan .ani_list > li{font-size: 220%;}

                .sub_about .factory h2 { font-size: 140%; }
            }

        .sub_about .intro{margin-top: 140px;}
        .sub_about .intro .sticky_wrap{display: flex;align-items: flex-start; flex-wrap: wrap; row-gap: 30px;}
        .sub_about .intro .sticky_wrap .thumb{width: 42.6%;font-size: 0;margin-top: 200px;}
        .sub_about .intro .sticky_wrap .sub_title{position: sticky;top: 200px; width: 57.4%;padding-left: clamp(30px, 7.5vw, 140px);margin-top: clamp(30px, 200px, 200px);}

            @media screen and (max-width:1300px) {
                .sub_about .intro .sticky_wrap .sub_title p br.for_pc{display: none;}
            }
            @media screen and (max-width:1023px) {
                .sub_about .intro{margin-top: clamp(70px, 14vw, 140px);}
                .sub_about .intro .sticky_wrap .thumb{margin-top: clamp(50px, 20vw, 200px);}
                .sub_about .intro .sticky_wrap .sub_title{top: clamp(50px, 20vw, 200px);}
            }
            @media screen and (max-width:640px) {
                .sub_about .intro .sticky_wrap .thumb{width: 100%;}
                .sub_about .intro .sticky_wrap .sub_title{position: relative; width: 100%; top:auto; padding-left: 0; margin-top: 0px;}
            }

        .sub_about .history{padding: 140px 0 95px;}
        .sub_about .history .sub_title p{line-height: 1.5;}

        .hisSwiper{position: relative;margin-top: 60px;padding-left: 20px; overflow: hidden; box-sizing: border-box;}
        .hisSwiper .swiper-slide{position: relative;padding: 33px 15px 0 31px;width: 270px;height: auto;box-sizing: border-box;}
            .hisSwiper .swiper-slide:before, .hisSwiper .swiper-slide:after{position: absolute;content:'';width: 100%;height: 1px;background: var(--border-color03);top: 4px;left:0; transition: all 0.4s;}
            .hisSwiper .swiper-slide:first-child:before, .hisSwiper .swiper-slide:first-child:after{width: calc(100% + 20px); left: -20px;}
            .hisSwiper .swiper-slide:after{width: 0; background: var(--black-color00);}
            .hisSwiper :is(.swiper-slide.swiper-slide-active, .swiper-slide:has(~ .swiper-slide-active)):after{width: 100%; }
            .hisSwiper :is(.swiper-slide.swiper-slide-active, .swiper-slide:has(~ .swiper-slide-active)):first-child:after{width: calc(100% + 20px);}

            .hisSwiper .swiper-slide .desc:before{position: absolute;content:'';width: 9px;height: 9px;border: 1px solid var(--black-color00);border-radius: 100%;background: var(--point-white);box-sizing: border-box;top:0;left:0;transition: all 0.4s;z-index: 5;}
            .hisSwiper .swiper-slide.swiper-slide-next .desc:before, .hisSwiper .swiper-slide:has(~ .swiper-slide-next) .desc:before{background: var(--black-color00);}

        .hisSwiper .desc{font-size: var(--title-20);}
            .hisSwiper .desc dt:before{position: absolute;content:'';width: 1px;height: 93px;background: var(--border-color03);top: 0;left: 4px;}
            .hisSwiper .desc dt:after{position: absolute;content:'';width: 3px;height:3px;border-radius: 100%;background: var(--black-color00);box-sizing: border-box;top: 93px;left: 3px;}
            
            
        .hisSwiper .desc dt{font-size: max(30px, 150%);font-weight: 600;color: var(--black-color00);line-height: 1.1;}
            .hisSwiper .desc dt + dd{margin-top: 20px;}
        .hisSwiper .desc dd{font-size: max(14px, 70%);font-weight: 400;color: var(--black-color06);line-height:1.57;}
            .hisSwiper .desc dd + dd{margin-top: 10px;}

            @media screen and (max-width:1023px) {
                .sub_about .history{padding: clamp(70px, 14vw, 140px) 0 clamp(50px, 9.5vw, 95px);}
                .hisSwiper{margin-top: clamp(30px, 6vw, 60px);}
                .hisSwiper .swiper-slide{width: clamp(220px, 27vw, 270px);}
                .hisSwiper .desc dd + dd{margin-top: clamp(5px, 1vw, 10px);}
            }
            @media screen and (max-width:640px) {
                .hisSwiper .desc dt{font-size: max(25px, 150%);}
                    .hisSwiper .desc dt:before{height: 85px;}
                    .hisSwiper .desc dt:after{top: 85px;}
                .hisSwiper .desc dt + dd{margin-top: 15px;}
            }
            @media screen and (max-width:479px) {
                .hisSwiper .desc dt{font-size: max(23px, 150%);}
                    .hisSwiper .desc dt:before{height: 78px;}
                    .hisSwiper .desc dt:after{top: 78px;}
                .hisSwiper .desc dt + dd{margin-top: 10px;}
            }

        .partnership .logo_list{display: flex; flex-wrap: wrap; gap: 30px 15px; margin-top: 40px;}
        .partnership .logo_list > li{display: flex;align-items: center;justify-content: center;width: calc(100% / 5 - 12px);height: 120px;border:1px solid var(--border-color03);box-sizing: border-box;padding: 16px clamp(20px, 3vw, 50px);}

            @media screen and (max-width:1023px) {
                .partnership .logo_list{row-gap: clamp(15px, 3vw, 30px); margin-top: clamp(20px, 4vw, 40px);}
                .partnership .logo_list > li{width: calc(100% / 4 - 11.25px); height: clamp(80px, 12vw, 120px);}
            }
            @media screen and (max-width:640px) {
                .partnership .logo_list > li{width: calc(100% / 3 - 10px); }
            }
            @media screen and (max-width:479px) {
                .partnership .logo_list > li{width: calc(100% / 2 - 7.5px); }
            }


/*───────────────────────────────────────────────────────────
	globals
───────────────────────────────────────────────────────────*/
    /* quality */
        .sub_quality{padding-top: 63px;}
        .sub_quality .map_wrap{position: relative;margin-top: 124px;max-width: 1000px;margin-inline: auto;}
        .sub_quality .coor_list > li{position: absolute;top: 36.5%;right: calc(14.5% + 10px);cursor: pointer; z-index: 3;}
        .sub_quality .coor_list .desc{font-size: var(--title-20);}
        .sub_quality .coor_list .desc dt{position: relative; width: 16px; height: 16px; background:#09093c; /* background: var(--point-color01); */border-radius: 100%; box-shadow: 0 0 0 7px rgba(3,25,71,0.1);}

            .sub_quality .coor_list .desc dt{animation-name: coorList; animation-duration:2s; animation-iteration-count:infinite; animation-fill-mode: forwards; transition-timing-function:linear;}
            @keyframes coorList {0% {box-shadow: 0 0 0 0 rgba(3,25,71,0.1);} 70% {box-shadow: 0 0 0 7px rgba(23,25,71,0.1);} 100% {box-shadow: 0 0 0 10px rgba(3,25,71,0);}}

        .sub_quality .coor_list .desc dt img{position: absolute;bottom:calc(100% + 10px);left: 50%;transform: translateX(-50%);max-width: 40px;max-height: 40px;}
        .sub_quality .coor_list .desc dd{position: absolute;top:50%;right: calc(100% + 10px);transform: translateY(-50%);font-size: inherit;font-weight: 500;color: var(--black-color00);line-height: 1.4;}

            .sub_quality .coor_list > li:nth-child(2){top: 34.5%;right: calc(11.5% - 10px); z-index: 2;}
            .sub_quality .coor_list > li:nth-child(2) .desc dd{right:auto;left: calc(100% + 10px);}

            .sub_quality .coor_list > li:nth-child(3) { top: 50.5%; right: calc(19.5% - 10px); z-index: 3; }
			.sub_quality .coor_list > li:nth-child(4){top:24%;right:calc(13.5% + 10px);z-index:1;}
			.sub_quality .coor_list > li:nth-child(4) .desc dd{right:auto;left: calc(100% + 10px);}

        .sub_quality .coor_list .ov_desc{position: absolute;left:50%;bottom:calc(100% + 22px);transform: translateX(-50%);background: var(--black-color02);border-radius: 20px;padding:30px 12px 40px;width: 240px;box-sizing: border-box;font-size: var(--title-20);text-align: center;opacity: 0;transition: all 0.4s;z-index: 5; pointer-events: none;}
        .sub_quality .coor_list .ov_desc:before{position: absolute;content:'';width: 20px;height: 20px;background: var(--black-color02);left:50%;bottom: -10px;transform: translateX(-50%) rotate(45deg);}
        .sub_quality .coor_list .ov_desc dt{display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; font-size: inherit; font-weight: 500; color: var(--point-white);}
        .sub_quality .coor_list .ov_desc dt img{width: 20px;}
        .sub_quality .coor_list .ov_desc dt em{font-weight: inherit;}
            .sub_quality .coor_list .ov_desc dt + dd{margin-top: 20px;}
        .sub_quality .coor_list .ov_desc dd{display: flex; flex-direction: column; gap: 24px;}
        .sub_quality .coor_list .ov_desc img[alt="로고"]{filter: var(--filter-white);width: 60%;max-width: 111px;margin-inline:auto;}
        

            /* over */
                @media screen and (min-width:1024px){
                    .sub_quality .coor_list > li:hover .ov_desc{opacity: 1; pointer-events: all;}
                }
            
            /* on */
                .sub_quality .coor_list > li.on .ov_desc{opacity: 1; pointer-events: all;}

            @media screen and (max-width:1023px){
                .sub_quality{padding-top: clamp(0px, 6.3vw, 63px);}
                .sub_quality .map_wrap{margin-top: clamp(50px, 12.4vw, 124px);}
                .sub_quality .coor_list .desc dd{font-size: 90%; right: calc(100% + 10px);}
                .sub_quality .coor_list > li:nth-child(2) .desc dd{left:calc(100% + 10px);}
                .sub_quality .coor_list .desc dt{width: 14px; height: 14px;}
                .sub_quality .coor_list .desc dt img{width: 40px;}

                .sub_quality .coor_list .ov_desc{left:auto;right: -30px;transform: none; padding:clamp(20px, 3vw, 30px) 12px clamp(25px, 4vw, 40px); width: clamp(180px, 24vw, 240px);}
                    .sub_quality .coor_list .ov_desc:before{left:auto;right: 28px;transform: rotate(45deg);}
                .sub_quality .coor_list .ov_desc dt + dd{margin-top: clamp(15px, 2vw, 20px);}
                .sub_quality .coor_list .ov_desc dd{gap: clamp(15px, 2.4vw, 24px);}

                                .sub_quality .coor_list>li:nth-child(4) .desc dd {
                                    right: auto;
                                    left: calc(100% + 10px);
                                }
            }
			@media screen and (max-width:767px){
				.sub_quality .coor_list > li:nth-child(4){right:calc(12.5% + 10px);}
                                .sub_quality .coor_list>li:nth-child(4) .desc dd {
                                    right: auto;
                                    left: calc(100% + 5px);
                                }
			}
            @media screen and (max-width:640px){
                .sub_quality .coor_list .desc dt{width: 12px; height: 12px;}
                .sub_quality .coor_list .desc dt img{width: 35px;}
                @keyframes coorList {0% {box-shadow: 0 0 0 0 rgba(3,25,71,0.1);} 70% {box-shadow: 0 0 0 5px rgba(3,25,71,0.1);} 100% {box-shadow: 0 0 0 7px rgba(3,25,71,0);}}

                .sub_quality .coor_list .ov_desc{border-radius: 10px;bottom: calc(100% + 18px);}
                .sub_quality .coor_list .ov_desc:before{width: 15px;height: 15px;bottom: -5px;}
                .sub_quality .coor_list .ov_desc dt{font-size: 90%;}
            }
            @media screen and (max-width:431px){
                .sub_quality .coor_list > li{right: calc(18% + 10px);cursor: pointer;}
                .sub_quality .coor_list > li:nth-child(2){right: calc(14% - 10px);}
                .sub_quality .coor_list > li:nth-child(3){ top: 47.5%; right: calc(27.5% - 10px);}
                .sub_quality .coor_list .desc dd{font-size: 90%; right: calc(100% + 5px);}
                .sub_quality .coor_list > li:nth-child(2) .desc dd{left:calc(100% + 5px);}
                .sub_quality .coor_list .desc dt{width: 12px; height: 12px;}
                .sub_quality .coor_list .desc dt img{width: 35px;}
            }