@charset "utf-8";

body{word-break: keep-all;}
.sub_1400{max-width: 1400px; margin: auto;}
.sub_100per{width: 100%;}
body:not(.index) #container_wr{margin: 0; width: 100%;}
.sub_title{font-size: 14px; display: block; line-height: 1; color: #3814FF; margin: 120px auto 24px;}
.sub_title_deco{font-size: 46PX; display: block; font-family: 'eco700'; margin: 0 auto 40px;}
.sub_text_title{font-size: 16px; line-height: 1.5; opacity: 0.8; margin: 0 auto 0;font-family: 'eco200'; min-height: 120px;}
.sub_top_img{margin: 0 50px 200px; background-color: black; height: 640px; border-radius: 32px;}

.sub_body_title{margin: 0 auto 24px; text-align: center;}
.sub_body_title2{margin-bottom: 56px; text-align: center;}

/*어바웃*/
.sub_top_img.about{background: url(../../../sub/img/bg_about_visual.png) no-repeat center center; background-size: cover;}
.about_box_img{border-radius: 24px; background-color: black; padding: 160px 0 160px; text-align: center; line-height: 1; color: white; font-size: 18px;}
.about_box_img b{display: block; font-size: 32px; font-family: 'eco700'; margin-bottom: 24px;}
.about_box_img span{display: block; opacity: 0.8;font-family: 'eco200';}
.about_box_img.img1{background: url(../../../sub/img/bg_about_core1.png) no-repeat center center; background-size: cover;}
.about_box_img.img2{background: url(../../../sub/img/bg_about_core2.png) no-repeat center center; background-size: cover;}
.about_box_img.img3{background: url(../../../sub/img/bg_about_core3.png) no-repeat center center; background-size: cover;}
.about_box_img.img1,.about_box_img.img2{margin-bottom: 24px;}
.about_box_img.img3{margin-bottom: 200px;}
.about.mission{background: url(../../../sub/img/bg_about_mission.png) no-repeat center bottom black; min-height: 1100px; position: relative;}
.about.mission .sub_title{margin: 0 auto 24px; line-height: 1;padding-top: 200px;}
.about.mission .sub_title_deco{color: white;}
.about.mission .item{width: 1400px; margin: 0 auto 0; position: relative;}
.about.mission .item div{position: absolute; padding: 12px 20px; color:#3814FF; background: white; border-radius: 50px; line-height: 1; font-size: 18px; display: flex;}
.about.mission .item div span{display: inline-block; width: 16px; height: 16px; border: 6px solid white; border-radius: 50%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.about.mission .item .brand{left: 70px;}
.about.mission .item .brand span{top: 380px;}
.about.mission .item .brand span::after{content: ''; width: 1px; height: 340px; position: absolute; bottom: 8px; left: 1px; background: white; opacity: 0.8;}
.about.mission .item .tech{left: 490px; top: 170px;}
.about.mission .item .tech span{top: 310px;}
.about.mission .item .tech span::after{content: ''; width: 1px; height: 270px; position: absolute; bottom: 8px; left: 1px; background: white; opacity: 0.8;}
.about.mission .item .people{right: 254px; top: 60px;}
.about.mission .item .people span{top: 270px;}
.about.mission .item .people span::after{content: ''; width: 1px; height: 240px; position: absolute; bottom: 8px; left: 1px; background: white; opacity: 0.8;}
.about.mission .item .idea{right: 73px; top: -90px;}
.about.mission .item .idea span{top: 120px;}
.about.mission .item .idea span::after{content: ''; width: 1px; height: 80px; position: absolute; bottom: 8px; left: 1px; background: white; opacity: 0.8;}
body:has(.about) #ft{background: black;}
body:has(.about) #ft #ft_copy{color: white;}


/*대표인사*/
.sub_top_img.greeting{background: url(../../../sub/img/bg_greeting_visual.png) no-repeat center center; background-size: cover; position: sticky;}
.sub_top_img.greeting img{position: absolute; right: 152px; bottom: 0;}
.greeting.sub_title_deco b{color: #3814FF; margin-bottom: 56px;}
.greeting.sub_title_deco p{margin-bottom: 40px; opacity: 0.8; text-align: center; font-size: 18px;font-family: 'eco200'; line-height: 1.8;}
.greeting.sub_title_deco p.top56{margin-top: 56px;}
.greeting.sub_title_deco p.bottom{margin-bottom: 56px;}
.greeting.sub_title_deco .img_flex{display: flex; gap: 16px; margin-bottom: 56px;}
.greeting.sub_title_deco .img_flex div:nth-child(1){background: url(../../../sub/img/bg_greeting_img1.png) no-repeat center center; background-size: cover;}
.greeting.sub_title_deco .img_flex div:nth-child(2){background: url(../../../sub/img/bg_greeting_img2.png) no-repeat center center; background-size: cover;}
.greeting.sub_title_deco .img_flex div:nth-child(3){background: url(../../../sub/img/bg_greeting_img3.png) no-repeat center center; background-size: cover;}
.greeting.sub_title_deco .img_flex div{width: calc((100% - 32px) / 3); line-height: 320px; text-align: center; background-color: black; color: white; font-size: 24px; border-radius: 24px;}
.greeting.sub_title_deco .sign{padding-top: 22px; padding-bottom: 65px; padding-right: 164px; background: url(../../../sub/img/sign.png) no-repeat right center; min-height: 115px; display: inline-block; font-size: 24px; margin: 56px auto 200px;}
body:has(.greeting) #ft{background: black;}
body:has(.greeting) #ft #ft_copy{color: white;}
.sub_100per.greeting{background:url(../../../sub/img/bg_greeting.png) no-repeat center bottom; background-color: black; padding-bottom: 200px;}
.sub_100per.greeting .sub_title_deco{color: white; padding-top: 200px;}
.sub_100per.greeting .cicle{max-width: 50%; max-height: 200px; line-height: 200px; border-radius: 50%; border: 1.5px solid white; color: white; text-align: center; font-size: 24px; font-family: 'eco200'; margin: -24px auto 0;}
.sub_100per.greeting .cicle.first{margin-top: 0;}
.sub_100per.greeting .cicle b{font-family: 'eco700';}

/*히스토리*/
.sub_1400.history{margin-bottom: 200px; position: relative; height: 100%;}
.sub_top_img.history{background: url(../../../sub/img/bg_history_visual.png) no-repeat center center; background-size: cover;}
.sub_1400.history .year_box{margin-bottom: 120px; display: flex; gap: 215px;color: black; transition: color .2s ease;}
.sub_1400.history .year_box.last{margin-bottom: 0;}
.sub_1400.history .year_box .year{font-size: 46px; font-family: "eco700"; line-height: 1;}
.sub_1400.history .year_box.active .year{color: #3814FF;}
.sub_1400.history .year_box li{font-size: 20px; margin-bottom: 18px; font-family: "eco200"; line-height: 1; display: flex; line-height: 1.2;}
.sub_1400.history .year_box li b{font-family: "eco700"; display: inline-block; margin-right: 24px;}
.sub_1400.history .year_box li:last-child{margin-bottom: 0;}
.history-rail{position: absolute; top: 0; height: 100%; min-height: 360px; width: 100px; z-index: 1; left: 240px;}
.history-rail .rail-fill{position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: #3814FF; border-radius: 2px;}
.history-rail .rail-line{position: relative; height: 100%; width: 4px; margin-left: 24px; background: #ddd; border-radius: 2px;}
.history-rail .rail-arrow{position: absolute; left: 50%; transform: translate(-50%, 0); width: 48px; height: 48px; border-radius: 999px; border: 0; outline: none; background: #3814FF; color: #fff; display: flex; align-items: center; justify-content: center; cursor: default; transition: box-shadow .2s ease;}
.history-rail .rail-arrow:active{ box-shadow: 0 4px 12px rgba(90,60,245,.25); }

/*디자인*/
.sub_top_img.design{background: url(../../../sub/img/bg_design_visual.png) no-repeat center center; background-size: cover;}
.sub_1400.design{margin-bottom: 40px;}
.sub_1400.design .sub_title,.sub_1400.design .sub_title_deco{text-align: center;}
.tabs {display:flex; gap:8px; margin-bottom:12px; justify-content: center;}
.tab{ padding:0 40px 0; border-radius:25px; background:white; border:1px solid #ddd;font-size:16px; cursor:pointer; transition:all .2s ease; line-height: 50px;}
.tab.is-active{background:#3814FF; color:#fff; border-color:#3814FF}
.panel{margin-top: 40px; font-size: 16px;}
.panel[hidden]{display:none;}
.sub_1400.design .detail_text{font-size: 16px; text-align: center; font-family: 'eco200'; line-height: 1.5; margin-bottom: 24px;}
.sub_1400.design .detail_text b{display: block; font-family: 'eco700';}


/*브랜드*/
.sub_top_img.brand{background: url(../../../sub/img/bg_business_visual.png) no-repeat center center; background-size: cover;}
.sub_1400.brand{margin-top: 200px; margin-bottom: 200px;}
.sub_1400.brand .left .img{background: url(../../../sub/img/bg_petaz.png) no-repeat center center; background-size: cover;}
.sub_1400.brand .right .img{background: url(../../../sub/img/bg_huki.png) no-repeat center center; background-size: cover;}
.sub_1400.brand .sub_title,.sub_1400.brand .sub_title_deco{text-align: center;}
.sub_1400.brand .sub_title_deco{margin-bottom: 96px;}
.sub_1400.brand .product{display: flex; gap: 10%;}
.sub_1400.brand .product.left{margin-bottom: 120px;}
.sub_1400.brand .product .img{position: relative; background-color: black; border-radius: 24px; width: 45%; min-height: 480px;}
.sub_1400.brand .product .img img:nth-child(1){left: 50%; top: 50%; transform:translate(-50%,-50%); position: absolute;}
.sub_1400.brand .product.left .img img:nth-child(2){right: -140px; bottom: -40px; position: absolute;}
.sub_1400.brand .product.right .img img:nth-child(2){left: -120px; bottom: -56px; position: absolute;}
.sub_1400.brand .product .text{width: 45%;}
.sub_1400.brand .product .text .title{font-size: 24px; font-family: 'eco700'; line-height: 1; padding-top: 48px; padding-bottom: 32px; word-break: keep-all;}
.sub_1400.brand .product .text .detail p{line-height: 1.5; font-size: 18px; opacity: 0.8; margin-bottom: 24px; font-family: 'eco200';}
.sub_1400.brand .product .text .link{margin-top: 56px; text-decoration: underline; color: black; font-size: 14px;}

/*바이오*/
.sub_1400.bio .sub_title,.sub_1400.bio .sub_title_deco{text-align: center;}
.sub_100per.certifications{background-color: #f7f7f7;padding-top: 200px; padding-bottom: 200px;}
.sub_100per.certifications .sub_title{margin-top: 0;}
.sub_100per.certifications .sub_title,.sub_100per.certifications .sub_title_deco{text-align: center;}
.sub_100per.certifications .flex{display: flex; gap: 16px; justify-content: center;}
.sub_100per.certifications .flex .certi_img{width: calc((100% - 32px) / 3); text-align: center;}
.sub_100per.certifications .flex .certi_img img{width: 100%; margin-bottom: 48px; border: 1px solid #ddd;}
.sub_100per.certifications .flex .certi_img b{font-family: 'eco700'; font-size: 18px; line-height: 1; margin-bottom: 12px; display: block;}
.sub_100per.certifications .flex .certi_img span{font-family: 'eco200'; line-height: 1.5; font-size: 16px; opacity: 0.8; word-break: keep-all;}
body:has(.certifications) #ft{background: #f7f7f7;}
.sub_top_img.bio{background: url(../../../sub/img/bg_bio_visual.png) no-repeat center center; background-size: cover;}
.bio .bio_flex{display: flex; justify-content: space-between; gap: 40px; margin-bottom: 200px;}
.bio .bio_flex .box{border: 1px solid #eaeaea; padding: 40px; width: 100%; text-align: center; border-radius: 32px;}
.bio .bio_flex .box img:first-child{margin-bottom: 48px; height: 132px;}
.bio .bio_flex .box p{font-size: 18px; line-height: 1.5; width: 80%; word-break: keep-all; margin: 0 auto 48px;}
.bio .bio_flex .left .img{position: relative; padding-top: 32px;}
.bio .bio_flex .left .img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #cedfeb 0%, transparent 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    z-index: 0;
}
.bio .bio_flex .left .img div{position: relative; z-index: 1;}
.bio .bio_flex .left .img .d1{font-size: 24px; color: white; background: linear-gradient(to right, #0f5d9e, #289a3c);line-height: 50px; padding: 0 24px 0; border-radius: 25px; display: inline-block; margin: 0 auto 24px;}
.bio .bio_flex .left .img .d2{border: 2px solid #289a3c; padding: 0 16px 0; display: inline-block; line-height: 40px; font-size: 16px; background: white; border-radius: 20px; margin-bottom: 32px;}
.bio .bio_flex .left .img .d2 span:first-child{color: #0f5d9e;}
.bio .bio_flex .left .img .d2 span:last-child{color: #289a3c;}
.bio .bio_flex .left .img .d3{display: flex; letter-spacing: -1px; font-size: 14px; gap: 4px;}
.bio .bio_flex .left .img .d3.eng{font-size: 12px;}
.bio .bio_flex .left .img .d3 div b{position: relative; border: 1px solid #ddd; background: white; border-radius: 8px; padding: 12px 8px 12px; display: flex; width: 100%; word-break: keep-all; height: 80px; align-items: center; margin-bottom: 32px;}
.bio .bio_flex .left .img .d3 div b::after{content: ''; position: absolute; top: 79px; display: inline-block; width: 1px; left: 50%; background: #ddd; height: 32px;}
.bio .bio_flex .left .img .d3 div span{padding: 12px 8px 12px; display: flex;align-items: center; word-break: keep-all; background: #eaeaea; border: 1px solid #ddd; border-radius:8px; max-height: 80px;}
.bio .bio_flex .right img{height: 220px;}

/*마케팅*/
.sub_1400.mkt .sub_title,.sub_1400.mkt .sub_title_deco{text-align: center;}
.sub_top_img.mkt{background: url(../../../sub/img/bg_mkt_visual.png) no-repeat center center; background-size: cover;}
.mkt.boxs .box{background-color: black; color: white; display: flex; flex-direction: column; padding: 140px 16px 140px; border-radius: 32px; justify-content: center; margin-bottom: 24px;}
.mkt.boxs .box1{background: url(../../../sub/img/bg_mkt1.png) no-repeat center center; background-size: cover;}
.mkt.boxs .box2{background: url(../../../sub/img/bg_mkt2.png) no-repeat center center; background-size: cover;}
.mkt.boxs .box3{background: url(../../../sub/img/bg_mkt3.png) no-repeat center center; background-size: cover;}
.mkt.boxs .box4{background: url(../../../sub/img/bg_mkt4.png) no-repeat center center; background-size: cover;}
.mkt.boxs .box5{background: url(../../../sub/img/bg_mkt5.png) no-repeat center center;margin-bottom: 200px;}
.mkt.boxs .box b{display: block; text-align: center; font-size: 32px; font-family: 'eco700'; line-height: 1; margin-bottom: 24px;}
.mkt.boxs .box span{font-size: 18px; font-family: 'eco200'; display: block; text-align: center; word-break: keep-all;}
.sub_100per.mkt{padding: 200px 0 0;background:#f7f7f7 url(../../../sub/img/bg_mkt_w100per.jpg) no-repeat top 600px center; background-size: cover;}
.sub_100per.mkt .sub_1400 .sub_title{margin-top: 0; text-align: center;}
.sub_100per.mkt .sub_1400 .sub_title_deco{margin-top: 0; text-align: center;}
.sub_100per.mkt .sub_1400 .sub_title.top200{margin-top: 200px;}
.sub_100per.mkt .sub_1400:has(.top200) .sub_title_deco{color: white;}
.sub_100per.mkt .sub_1400.pb200{padding-bottom: 200px;}
body:has(.mkt) #ft{background: black;}
.sub_100per.mkt ul{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px;}
.sub_100per.mkt ul li{background: white; width: calc((100% - 32px) / 5); height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 8px;}
.sub_100per.mkt ul li img{max-width: 60%; max-height: 40%;}
.sub_100per.mkt ul li:nth-child(1) img{max-width: 70%; max-height: 70%;}
.sub_100per.mkt ul li:nth-child(5) img{max-height: 30%;}
.sub_100per.mkt ul li:nth-child(14) img{max-width: 80%; max-height: 45%;}

.sub_100per.mkt2{background-color: black;}
.sub_100per.mkt2 .sub_title_deco{color: white;}
.sub_100per .naver{border-radius: 32px; background: rgba(0,0,0,0.5); padding: 80px; color: white; text-align: center; font-size: 18px; font-family: 'eco200'; line-height: 1.3;}
.sub_100per .naver b,.sub_100per .naver div{font-family: 'eco700';}
.sub_100per .naver div {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #2bff8a 0%, #ffe927 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: inline-block;
    margin-bottom: 24px;
    position: relative;
}
.sub_100per.mkt2{background: url(../../../sub/img/bg_mkt_w100per.jpg) no-repeat top center; background-size: cover; padding-top: 480px;}
.mkt .flex{display: flex; gap:40px}
.mkt .flex a{width: 100%; border-radius: 32px; background: white; padding: 40px; text-align: center; font-size: 16px; text-decoration: underline; display: inline-block; border: 6px solid white;transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;}
.mkt .flex a:hover{border-color: #3814FF;color: #3814FF;}
.mkt .flex .box img{filter: brightness(0); margin-bottom: 32px; height: 42px;}

/*오시는길*/
.sub_top_img.contact{margin-bottom: 160px;}
.sub_1400.contact{margin-bottom: 200px;}
.sub_1400.contact .map_title{font-size: 24px; line-height: 1; font-family: 'eco700'; margin-bottom: 24px;}
.sub_1400.contact .map_info{display: flex; justify-content: space-between;}
.sub_1400.contact .map_btn{display: flex; gap: 8px;}
.sub_1400.contact .map_btn a{display: inline-block; color: white; font-family: 'eco700'; background: #207E33; line-height: 50px; margin-top: -32px; border-radius: 8px; font-size: 14px; padding: 0 16px;}
.sub_1400.contact .map_btn a:last-child{background: #F1BE1A;}
.sub_1400.contact .map_address{background: url(../../../img/icon_telephone.png) no-repeat left center; padding-left: 24px; font-size: 16px; }
.sub_1400.contact .map_info{border-bottom: 1px solid #ddd; padding-bottom: 56px; margin-bottom: 56px;}
/* .sub_top_img.contact div:nth-child(1) div:nth-child(1) div:nth-child(6) div:nth-child(2){border-color: red;} 말풍선 위치 */
.sub_1400.contact .map_info2{display: flex; gap: 120px;}
.sub_1400.contact .map_info2 .title{font-size: 18px; font-family: 'eco700'; margin-bottom: 24px;}
.sub_1400.contact .map_info2 li{padding-left: 16px; line-height: 1.3; margin-bottom: 16px; font-size: 16px; display: flex;}
.sub_1400.contact .map_info2 span{display: inline-block; margin-right: 16px;}
.sub_1400.contact .map_info.eng span, .sub_1400.contact .map_info2.eng span{width: 100px;}
.sub_1400.contact .map_info2 .bus ul li:nth-child(3){background: url(../../../img/bus1.png) no-repeat left top 2px;}
.sub_1400.contact .map_info2 .bus ul li:nth-child(3) span{color: #C22C2C;}
.sub_1400.contact .map_info2 .bus ul li:nth-child(2){background: url(../../../img/bus2.png) no-repeat left top 2px;}
.sub_1400.contact .map_info2 .bus ul li:nth-child(2) span{color: #268214;}
.sub_1400.contact .map_info2 .bus ul li:nth-child(1){background: url(../../../img/bus3.png) no-repeat left top 2px;}
.sub_1400.contact .map_info2 .bus ul li:nth-child(1) span{color: #1E62C7;}
.sub_1400.contact .map_info2 .car li{background: url(../../../img/maps.png) no-repeat left top 2px; font-family: 'eco200';}
.sub_1400.contact .map_info2 .car li span{color: black; font-family: 'ecofont';}

@media screen and (max-width: 1400px){
    .sub_1400{max-width: unset; width: calc(100% - 100px); margin-left: 50px;}
    .sub_title_deco{font-size: 32px; word-break: keep-all;}
    .sub_title_deco{margin-bottom: 24px;}
    .about.mission{min-height: 860px; background-size: contain;}
    .about.mission .item .brand{left: 5%;}
    .about.mission .item .brand span{top: 230px;}
    .about.mission .item .brand span::after{height: 190px;}
    .about.mission .item .tech{left: 30%;}
    .about.mission .item .tech span{top: 190px;}
    .about.mission .item .tech span::after{height: 150px;}
    .about.mission .item .people{right: 30%;}
    .about.mission .item .idea{right: 5%; top: 10px;}
    .about.mission .item{width: 100%;}
    .about.mission .item div{font-size: 16px;}
    .about.mission .item .idea span::after{height: 90px;}
    .sub_1400.history .year_box .year{font-size: 32px;}
    .sub_1400.history .year_box{gap: 100px;}
    .sub_1400.history .year_box li{font-size: 16px; display: flex; line-height: 1.5; word-break: keep-all;}
    .history-rail{left: 115px;}
    .sub_1400.business .product .img{width: 35%; min-height: unset; height: 380px;}
    .sub_1400.business .product{justify-content: space-between;}
    .sub_1400.business .product .img img:nth-child(1){width: 110px;}
    .sub_1400.business .product.right .img img:nth-child(2){height: 340px;}
    .sub_1400.business .product.left .img img:nth-child(2){right: -200px; height: 270px;}
    .bio .bio_flex .right .img1{margin-bottom: 16px; height: 200px;}
    .sub_1400.brand .product.left .img img:nth-child(2),.sub_1400.brand .product.right .img img:nth-child(2){display: none;}
    .sub_1400.brand .product{gap: 5%;}
}

@media screen and (max-width: 1200px){
    .about.mission{min-height: 720px;}
    #ft .ft_blue{padding: 32px; border-radius: 24px;}
    #ft .ft_blue .btn a:nth-child(1){margin-right: 8px;}
    #ft .ft_blue .btn a{line-height: 60px; width: 170px; font-size: 16px; padding-left: 24px; background-position: right 22px center !important;}
    #ft .ft_blue .text{line-height: 60px; font-size: 18px;}
    .about.mission .item .brand span{top: 180px;}
    .about.mission .item .brand span::after{height: 150px;}
    .about.mission .item .tech span{top: 100px;}
    .about.mission .item .tech{top: 120px;}
    .about.mission .item .tech span::after{height: 70px;}
    .about.mission .item .people span{top: 160px;}
    .about.mission .item .people span::after{height: 130px;}
    .copytext{font-size: 26px;}
    .sub_top_img.greeting img{ right: 5%;}
    .greeting.sub_title_deco p br{display: none;}
    .sub_1400.business .product .text .title{font-size: 20px;}
    .sub_1400.business .product.left .img img:nth-child(2){display: none;}
    .sub_1400.business .product.right .img img:nth-child(2){display: none;}
    .sub_1400.business .product.left{margin-bottom: 80px; gap: 40px;}
    .sub_1400.business .product .img{width: 100%;}
    .sub_1400.business .product .text{width: 100%;}
    .sub_1400.business .product .text .title{padding-top: 32px; padding-bottom: 24px; line-height: 1.3;}
    .sub_1400.contact .map_info{flex-direction: column;}
    .sub_1400.contact .map_btn a{margin-top: 24px;}
    .sub_1400.contact .map_info2{gap: 56px; flex-direction: column;}
    .sub_1400.contact .map_info2 li{display: flex; word-break: keep-all;}
    .sub_1400.contact .map_info2 .car li span{min-width: 100px;}
    .sub_1400.contact .map_info2 .car li{background-position: left top 2px; word-break: keep-all;}
    .sub_1400.contact .map_info2 .bus ul li span{min-width: 35px;}
    .sub_1400.contact .map_info2 .bus ul li{background-position: left top 2px !important;}
    .bio .bio_flex{gap: 16px;}
    .bio .bio_flex .left .img .d3{flex-direction: column;}
    .bio .bio_flex .left .img .d3 div b{max-height: 80px; height: unset; margin-bottom: 4px; text-align: center;justify-content: center; letter-spacing: 0; font-size: 16px;}
    .bio .bio_flex .left .img .d3 div b::after{display: none;}
    .bio .bio_flex .left .img .d3 div span{margin-bottom: 12px; text-align: center; justify-content: center; font-family: 'eco200';}
    .bio .bio_flex .left .img .d2{line-height: 1.3; padding: 12px; word-break: keep-all; margin-bottom: 16px;}
    .bio .bio_flex .left .img .d1{font-size: 18px; margin-bottom: 12px;}
    .bio .bio_flex .right .img1{height: unset; width: 70%; margin-bottom: 32px;}
    .bio .bio_flex .right .img2{height: unset; width: 95%;}
    .sub_100per.mkt ul li{width: calc((100% - 24px) / 4);}
    .mkt .flex{gap: 16px;}
}

@media screen and (max-width: 840px){
    .sub_1400{max-width: unset; width: calc(100% - 32px); margin-left: 16px;}
    .sub_top_img{width: calc(100% - 32px); margin: 0 auto 100px; height: 320px;}
    .sub_text_title{min-height: unset; margin-bottom: 32px;}
    .sub_body_title{margin-bottom: 16px;}
    .about_box_img,.mkt.boxs .box{font-size: 16px; padding: 140px 0 140px;}
    .about_box_img.img3,.mkt.boxs .box5{margin-bottom: 160px;}
    .about.mission .sub_title{padding-top: 160px;}
    #ft .ft_blue .text{line-height: 2;}
    .about.mission{min-height: 630px;}
    .about.mission .item .tech{left: 25%;}
    .about.mission .item .people{right: 25%;}
    #ft .ft_blue .btn a{padding-left: 0;}
    .history-rail .rail-arrow{width: 28px;}
    .sub_1400.history{margin-bottom: 160px;}
    .sub_1400.history .year_box .year{font-size: 24px;}
    .sub_1400.history .year_box{gap: 60px;}
    .history-rail{left: 67px;}
    .sub_1400.history .year_box li b{margin-right: 10px;}
    .sub_top_img.greeting img{right: 5%;}
    .greeting.sub_title_deco p{font-size: 16px; word-break: keep-all; margin-bottom: 24px;}
    .greeting.sub_title_deco .sign{font-size: 18px; background-size: 150px; margin-bottom: 140px;}
    .sub_100per.greeting .cicle{max-width: 80%; line-height: 140px; max-height: 140px; font-size: 18px;}
    .sub_100per.greeting .sub_title_deco{padding-top: 160px; margin-bottom: 20px;}
    .sub_100per.greeting{padding-bottom: 160px;}
    .greeting.sub_title_deco .img_flex div{font-size: 18px; line-height: 240px;}
    .sub_1400.business{margin-top: 160px;}
    .sub_1400.business .product .text .detail p{font-size: 16px; margin-bottom: 16px;}
    .sub_1400.business .product .text .detail p br{display: none; word-break: keep-all;}
    .sub_1400.business .product .text .link{margin-top: 32px;}
    .sub_1400.business{margin-bottom: 160px;}
    .sub_100per.certifications{padding-top: 160px; padding-bottom: 160px;}
    .sub_100per.certifications .flex .certi_img img{margin-bottom: 24px;}
    .sub_100per.certifications .flex .certi_img b{font-size: 16px; margin-bottom: 8px;}
    .sub_100per.certifications .flex .certi_img span br{display: none;}
    .sub_1400.contact .map_title{line-height: 1.3; font-size: 18px;}
    .sub_1400.contact{margin-bottom: 160px;}
    .bio .bio_flex{flex-direction: column;}
    .bio .bio_flex .left .img .d1{display: block; width: 52%;}
    .bio .bio_flex .right .img1{width: 40%;}
    .bio .bio_flex .right .img2{width: 65%;}
    .bio .bio_flex .box p{width: unset; margin-bottom: 24px;}
    .bio .bio_flex .box img:first-child{height: 100px;}
    .bio .bio_flex .box{padding: 24px; margin-bottom: 24px;}
    .bio .bio_flex .left .img .d3 div span{margin-bottom: 8px;}
    .bio .bio_flex{margin-bottom: 200px;}
    .bio .bio_flex .left .img::before{height: 50%;}
    .sub_100per.mkt{padding: 160px 0 160px;}
    .sub_1400.brand .sub_title_deco{margin-bottom: 56px;}
    .sub_1400.brand .product.left{margin-bottom: 100px;}
    .sub_1400.brand .product{flex-direction: column;}
    .sub_1400.brand .right.product{flex-direction: column-reverse;}
    .sub_1400.brand .product .img{width: 100%; min-height: 280px;}
    .sub_1400.brand .product.left .img img{height: 58px;}
    .sub_1400.brand .product.right .img img{height: 40px;}
    .sub_1400.brand .product .text{width: 100%;}
    .sub_1400.brand .product .text .detail p{font-size: 16px; margin-bottom: 16px; word-break: keep-all;}
    .sub_1400.brand .product .text .detail p br{display: none;}
    .sub_1400.brand .product .text .link{margin-top: 32px;}
    .sub_1400.brand{margin-top: 160px; margin-bottom: 160px;}
    .sub_1400.brand .product .text .title{line-height: 1.3; font-size: 20px;}
    .sub_100per.mkt ul li{width: calc((100% - 16px) / 2);}
    .mkt .flex{flex-direction:column;}
    .sub_100per.mkt .sub_1400 .sub_title.top200{margin-top: 160px;}
    .sub_100per.mkt .sub_1400.pb200{padding-bottom: 0;}
    .sub_100per .naver{padding: 40px;}
    .mkt .flex a{border-radius: 24px;}
}

@media screen and (max-width: 500px){
    .sub_title_deco{font-size: 26px;margin-bottom: 24px;}
    .sub_title{margin-bottom: 12px;}
    .sub_text_title{min-height: 80px;}
    .sub_top_img{height: 240px;}
    .about_box_img b,.mkt.boxs .box b{font-size: 24px; margin-bottom: 16px;}
    .about_box_img,.mkt.boxs .box{font-size: 16px; padding: 56px 32px 56px; line-height: 1.5; word-break: keep-all;}
    .about_box_img.img3,.mkt.boxs .box5{margin-bottom: 100px;}
    .about.mission .sub_title{padding-top: 100px;}
    .about_box_img.img1, .about_box_img.img2{margin-bottom: 16px;}
    .about.mission{min-height: 560px; max-height: 560px;}
    .about.mission .item div{font-size: 14px;}
    .sub_body_title2.sub_title_deco br{display: none; padding: 0 20px 0;}
    .sub_body_title2.sub_title_deco.greeting br{display: unset;}
    #ft .ft_blue .btn a:nth-child(1){margin-right: 0;}
    #ft .ft_blue .btn a{width: 100%;}
    .sub_1400.history{margin-bottom: 100px;}
    .sub_1400.history .year_box .year{font-size: 18px;}
    .history-rail .rail-line{margin-left: 8px;}
    .sub_1400.history .year_box li{margin-bottom: 13px;}
    .sub_top_img.greeting img{max-height: 270px; right: 4%;}
    .sub_100per.greeting .cicle{max-height: 100px; font-size: 16px; width: 90%; margin-top: -12px; max-width: unset; line-height: 1.5; padding: 30px 0 30px;}
    .sub_100per.greeting .sub_title_deco{padding-top: 100px; }
    .sub_100per.greeting{padding-bottom: 100px;}
    .greeting.sub_title_deco .img_flex{flex-direction: column; gap: 8px;}
    .greeting.sub_title_deco .img_flex div{width: 100%; line-height: 160px;}
    .greeting.sub_title_deco .img_flex{margin-bottom: 40px;}
    .sub_1400.business{margin-top: 100px;}
    .sub_1400.business .product{flex-direction: column;}
    .sub_1400.business .sub_title_deco{margin-bottom: 56px; gap: 16px;}
    .sub_1400.business .product .img{height: 240px;}
    .sub_1400.business .product .text .title{padding-top: 16px; padding-bottom: 16px;}
    .sub_1400.business .product .text .detail p{margin-bottom: 8px;}
    .sub_1400.business .product.right{flex-direction: column-reverse;}
    .sub_1400.business{margin-bottom: 100px;}
    .sub_100per.certifications{padding-top: 100px; padding-bottom: 100px;}
    .sub_100per.certifications .flex{flex-direction: column;}
    .sub_100per.certifications .flex .certi_img{width: 100%; position: relative; text-align: unset;}
    .sub_100per.certifications .flex .certi_img img{margin-bottom: 0; width: 40%;}
    .sub_100per.certifications .flex .certi_img b{position: absolute; top: 24px; left: calc(40% + 40px); width: calc(40% + 40px);}
    .sub_100per.certifications .flex .certi_img span{position: absolute; top: 52px; left: calc(40% + 40px); width: calc(40% + 40px);}
    .sub_100per.certifications .flex .certi_img:nth-child(2){text-align: right; margin-top: -80px;}
    .sub_100per.certifications .flex .certi_img:nth-child(2) b{left:0; top: 104px;}
    .sub_100per.certifications .flex .certi_img:nth-child(2) span{left: 0; top: 132px}
    .sub_100per.certifications .flex.eng .certi_img:nth-child(2){margin-top: -70px;}
    .sub_100per.certifications .flex.eng .certi_img:nth-child(3){margin-top: 80px;}
    .sub_100per.certifications .flex.eng .certi_img:nth-child(2) b{top: 90px;}
    .sub_100per.certifications .flex.eng .certi_img b{top: 10px;}
    .certifications .sub_title_deco{margin-bottom: 56px;}
    #map{margin-bottom: 100px !important;}
    .sub_1400.contact{margin-bottom: 100px;}
    .bio .bio_flex{margin-bottom: 100px;}
    .mkt.boxs .box span{font-size: 16px; opacity: 0.8;}
    .sub_100per.mkt{padding: 100px 0 100px;}
    .sub_1400.brand{margin-top: 100px; margin-bottom: 100px;}
    .sub_1400.brand .product .img{height: 240px;}
    .about_box_img, .mkt.boxs .box{margin-bottom: 16px;}
    .sub_100per .naver{padding: 40px 16px 40px;}
    .mkt .flex a{padding: 16px; font-size: 14px;}
    .mkt .flex .box img{margin-bottom: 16px;}
    .sub_100per.mkt ul li img{max-width: 70%;}
    .sub_100per.mkt ul li:nth-child(4) img,.sub_100per.mkt ul li:nth-child(5) img{max-height: 35%;}
}