.pclist{}
.molist{display: none}

.nav_drop{display: none}
.card_are_mo{display: none}

.all_nav{display: none}
.nav_btn{display: none}

@media (max-width: 1640px) {

.main_visual_txt, .main_slide .slick-dots{padding: 0 25px}
.controls{right: 25px; }
.header .logo{left: 25px}
.header .top_right{right: 25px}


.inner{padding: 0 25px}

.ceo{gap:5rem}

.bu_greet .left{width: 280px}

}






@media (max-width: 1580px) {


.header:hover li {
    width:170px;
    max-width: 100%;
    padding:0 20px;
}


.header .head_subdeps ul li {
    text-align: center;
    width: 170px;
    padding: 0 20px;
    word-break: keep-all
}


.right_btn{right: 25px;}


.location_info{padding-left: 5rem}

.location_info li{font-size: 18px}

.location_info li img {
    margin-top: 4px;
}

.map_more *, .footer .foot_top a{font-size: 16px}

.ceo .txt p, 
.ceo .txt h4, 
.history_flex ul li,
.icon_flex_5 .box p,
.bu_greet .txt p,
.bu_greet .txt h4,
ul.dist li,
.product_flex .sub_title p,
.employment_flex .box h3{font-size: 18px; line-height: 32px}


.icon_flex_step p{font-size: 16px}


.icon_flex_step {
    flex-wrap: wrap;
}


.bu_greet, .product_flex{gap:5rem}


}


@media (max-width: 1360px) {

 
.main_visual_txt h2{font-size: 60px; line-height: 1.4}
.main_visual_txt p{font-size: 18px; line-height: 1.4}

.main_title h3, .sub_title h3{font-size: 14px; margin-bottom: 10px}
.main_title h2, .sub_title h2{font-size: 40px; line-height: 1.4}

.main_about_flex .box h2{font-size: 40px; line-height: 1.4}

.small_title h2,
.board_detail_title h2{font-size: 30px}

.board_detail_title p{font-size: 14px}

.main_about_flex .box h2 span {
    margin-top: 10px;
}

.main_business_flex a,
.company_flex .box{height: 50vh}


.company_flex .box h3{font-size: 18px}

.sub_btn a,
.sub_btn.sml a,
.form_in .common_btn {font-size: 18px; height: 60px}

.sub_nav_are .sub_nav_drop p{font-size: 16px}



.header:hover li {
    width:140px;
    max-width: 100%;
    padding:0 20px;
}


.header .head_subdeps ul li {
    text-align: center;
    width: 140px;
    padding: 0 20px;
    word-break: keep-all
}

.ilac_center .box .in_box h3, .ilac_flex_box .in_flex .in_info p{font-size: 18px; line-height: 1.5}

.ilac_center .ilac_big h2{font-size: 18px}
.ilac_center .ilac_big {height: 60px}

.ilac_flex_box .in_flex h2{height: 60px; font-size: 18px}


.flex_step5 .box .txt h2, .r_box.flex_r .box p,
.board_list_txt h3{font-size: 18px; line-height: 1.5}
.flex_step5 .box .txt p{font-size: 16px; line-height: 1.4}

.flex_step5 .box h3{font-size: 30px}
.flex_step5 .box{height: 40vh}

.icon_flex_5 .box{gap:30px}


.icon_flex_step .box{flex:none}

.flex_slide .box ul.dist li + li{margin-top: 5px}


.product_flex .sub_title .sub_btn a,
.board_common_btn_list .common_btn {
    height: 60px;
    font-size: 18px;
}

}


@media (max-width: 1280px) {


/*mobile nav*/

.header{height: 90px}
.header .head_subdeps{display: none}
.header .logo{top: 25px}
.header .top_right{top: 25px}
.header .nav_top{display: none}

.nav_btn{display: block}	

.nav_btn{position: absolute; width: 30px; height: 25px; right: 25px; top: 30px; z-index: 9999}
.nav_btn span{position: absolute; right: 0; background: #fff; height: 2px; 
width: 100%; border-radius: 2px; transition-duration: .8s}
.nav_btn span:nth-child(1){width: 50%}
.nav_btn span:nth-child(2){top: 50%; transform: translateY(-50%);}
.nav_btn span:nth-child(3){ bottom: 0; width: 50%; margin-left: 50%}


.header.drop .nav_btn span{background: #1d1d1d}

.open_all .header .nav_btn span{background: #1d1d1d}



.open_all .header .nav_btn span:nth-child(1){    width: 100%;
            top: 50%;
        transform: translateY(-50%) rotate(45deg);}

.open_all .header .nav_btn span:nth-child(2){opacity: 0}

.open_all .header .nav_btn span:nth-child(3){    width: 100%;
    bottom: 50%;
        transform: translateY(50%) rotate(-45deg);  }


.open_all .header .logo{background-image: url(../img/common/logob.png);}
.open_all .header .lang a{color: #222}

.header .top_right{right: 75px}

.header:hover .nav_btn span{background: #222}

.all_nav{display: block;
position: fixed;  top: 0; z-index: 9995; background: rgba(255,255,255,.95);
width: 100%; height: 100%; transition-duration: 1s; right: -100%;

}

.open_all .all_nav{right: 0; }

.nav_all{display: none}  
  	
  	.nav_drop{display: block; margin-top: 100px}

   .nav_drop .collapsible {
            background-color: transparent;
            color: #222;
            cursor: pointer;
            padding: 20px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 18px; font-weight: bold
        }
      .nav_drop  .collapsible.active,
       .nav_drop .collapsible:hover {
            color: #0073AE
        }
       .nav_drop .content {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;

        }

       .nav_drop .content a{font-size: 18px; padding: 8px 0; display: block; color: #333}

       .nav_drop .collapsible:after {
            content: '\002B';
            color: #666;
            font-weight: bold;
            float: right;
            margin-left: 5px;
        }
       .nav_drop .collapsible.active:after {
            content: "\2212";
        }





/* monav end */

.video-slider .video_are{height: 100vh}

.history_slide .box{height: 40vh; padding:30px 25px; border-radius: 10px}

.tab_style{top: 120px}

.product_flex .product_slide_are{width: 50%}
.product_flex .product_slide_are img{max-width: 100%}

.flex_ci .box,
.flex_ci_info .box{height: 30vh}

.flex_ci_info .box h3{font-size: 18px}

.flex_ci_info .box ul li{font-size: 16px}
.flex_ci_info .box ul li + li{margin-top: 5px}


.esg_flex{padding: 0 25px}

}




@media (max-width: 1024px) {
	
.main_business_flex, .company_flex {
    display: flex;
    gap: 20px;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.main_business_flex a, .main_business_flex a:hover,
.company_flex .box, .company_flex .box:hover{flex:0 0 auto; width: 60%; height: 30vh}
.history_slide .box{height: auto}

.flex_ci .box{width: calc(50% - 10px); padding: 40px; height: 20vh; flex:none}
.flex_ci .box img{max-width: 100%}

.location_flex {
    margin-top: 80px;
    display: flex;
    gap: 50px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.location_flex .sub_title {margin-bottom: 0}
.location_info{padding-left: 0; border: 0}


.flex_step5 .box {
    width: calc(50% - 15px); height: 20vh
}


.icon_flex_5 {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}


    .icon_flex_5 .box {
        gap: 30px;
        flex: none;
        width: calc(50% - 15px);
    }

.flex_slide {
    display: flex;
    gap: 30px;
    flex-direction: column;
}

.flex_slide .box{width: 100%}

.r_box.flex_r {
    display: flex;
    gap:40px 20px;
    flex-wrap: wrap;
}

.product_flex {
        gap: 50px;
        flex-direction: column;
    }
.product_flex .product_slide_are{width: 100%}


.flex_ci{flex-wrap: wrap;}


.esg_flex .sub_title{width: 100%; margin: 0}


.esg_flex {
    margin-top: 80px;
    display: flex;
    padding: 0 25px;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap:20px
}

.esg_flex .txt{flex:none; width: 100%}

.gall_list_style li {
    width: calc(50% - 10px);
}


.employment_flex {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.employment_flex .box{
    width: calc(50% - 10px); flex:none
}

.welfare_flex {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}


.welfare_flex .box {
    width: calc(50% - 15px);
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #ddd;
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}


.performance .tab {
    margin-bottom: 80px;
    gap: 15px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    height: 72px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 0 50px;
    background: #fff;
    overflow-x: auto;
    flex-direction: row;
    width: 100%;
    position: relative;
    top: 0
}









}




@media (max-width: 860px) {


.main_about_flex {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.main_about_flex .box{width: calc(50% - 10px)}

.foot_sitemap{display: none}


.ceo, .bu_greet {
        gap: 50px;
        display: flex;
        flex-direction: column;
    }

.ceo .txt p br{display: none}


.history_flex h2 {
    width: 150px;
    font-size: 30px;
}


.ink_flex li {
    width: calc(50% - 10px);
    border-radius: 10px;
    background: #f9f9f9;
    padding: 45px;
}
 
.ink_flex li img{border-radius: 10px}

.ilac_flex_box {
    display: flex; 
    gap: 20px;
    flex-direction: column;
}

.flex_step5 .box{padding: 25px 25px 25px 25px; height: auto}
.flex_step5 .box .txt p br{display: none}


    .flex_step5 .box h3 {
        font-size: 30px;
        position: relative;
        left: 0;
        top: 0;
        right: auto;
        margin-bottom: 20px
    }



.more_bu_btn {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.more_bu_btn a{flex:none}


.ceo .txt p, .ceo .txt h4, .history_flex ul li, .icon_flex_5 .box p, .bu_greet .txt p, .bu_greet .txt h4, ul.dist li, .product_flex .sub_title p, .employment_flex .box h3{word-break: keep-all}

.esg_flex .txt p br{display: none}



.agree_pop_content{max-width: 90%; border-radius: 10px}



}




@media (max-width: 600px) {

.header .logo{width: 100px; background-size: 100px auto}

.header .top_right .lang + img{display: none}
.header .top_right{top: 35px}

.header .top_right .lang {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.header .top_right .lang a{font-size: 14px}

.main_visual_txt h2{font-size: 30px}

.right_btn a.chat{width: 50px; height: 50px; min-width: 50px;}
.right_btn a.chat .txt{font-size: 14px}
.right_btn a.top_sc{width: 50px; height: 50px}


    .right_btn {
        right: 25px;
        bottom: 25px;
    }

.right_btn a + a{margin-top: 5px}


.main_about,
.main_business,
.main_history{padding: 100px 0}

    .main_title h2, .sub_title h2 {
        font-size: 24px;
        line-height: 1.4;
    }
  
  .product_flex .sub_title h2 img{max-width: 30px;  }
  

.main_about_flex .box p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color: #fff;word-break: keep-all;
}
    .main_about_flex .box {
        width: calc(50% - 10px);
        border-radius: 5px;
        padding: 25px 15px
    }
    
    
.main_business_flex a,
.main_business_flex a, .company_flex .box{padding: 25px; border-radius: 10px}    
    
.main_business_flex a p,
.company_flex .box h3{font-size: 16px}

.company_flex .box p{font-size: 14px; line-height: 22px}
.company_flex .box p br{display: none}

.main_title{margin-bottom: 40px}


.history_slide .slick-slide .box h3 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
    transition-duration: .5s;
}

.history_slide .slick-slide .box ul li, .sub_visual .txt p{font-size: 14px; line-height: 22px}
.history_slide .slick-slide .box ul li + li{margin-top: 5px}


.map_more *, .footer .foot_top a, .foot_info ul li, .foot_info p, .agree_pop_info p,
.agree_pop_info h3,
.flex_ci_info .box ul li{font-size: 14px; line-height: 22px; word-break: keep-all}


.agree_pop_content{padding: 25px 25px 30px 25px}
.agree_pop_content .agree_title h2{font-size: 18px}


.sub_nav_are{display: none}

.sub_visual{height: 40vh}

.sub_visual .txt h2{font-size: 24px}


.sub_section {
    padding: 80px 0;
}

.sub_title{margin-bottom: 40px}


.sub_btn{gap:10px; flex-wrap: wrap;}


    .sub_btn a, .sub_btn.sml a, .form_in .common_btn {
        font-size: 16px;
        height: 50px;
        width: 100%;
        max-width: 80%;
        border-radius: 5px;
        margin: 0 auto
    }


.sub_title p {
    margin-top: 10px;
    font-size: 14px;
    color: #444;
    word-break: keep-all;
}


.flex_ci{gap:10px}

.flex_ci .box {
        width: calc(50% - 5px);
        padding: 20px;
        border-radius: 10px
    }


.flex_ci_info {
    display: flex;
    gap: 10px;
    flex-direction: column;
}


.flex_ci_info .box{padding: 25px; border-radius: 10px}
.ci_color p {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}


.flex_ci_info .box h3{font-size: 14px}

.location_info li {
    display: flex;
    gap: 15px;
    font-size: 16px;
    word-break: keep-all;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}


.map_more {
    margin-top: 20px;
    display: inline-flex;
    height: 40px;
    line-height: 40px;
    box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    padding: 0 25px;
    gap: 10px;
    background: #1B1B1B;
    align-items: center;
}


.nav_drop .content a{font-size: 16px}

.ceo .txt h4 {
    display: flex;
    gap: 5px;
    color: #1B1B1B;
    font-weight: bold;
    margin-top: 50px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    font-size: 16px
}


.ceo .txt p{font-size: 16px; line-height: 28px}
.ceo .txt p + p{margin-top: 20px}

.ani_img{border-radius: 5px}




.history_flex ul {
    padding: 0;
    border-left: 0px solid #ddd;
    flex: none;
    width: 100%;
}


.history_flex h2 {
        width: 100%;
        font-size: 24px;
    }


.history_flex .box {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}


.history_flex h2:before,
.history_flex h2:after{display: none}

.history_flex ul li{font-size: 14px; line-height: 22px}
.history_flex ul li + li{margin-top: 5px}

.history_flex .box + .box{margin-top: 30px}


.tab_style{display: none}

.ink_flex ul{gap:10px}
.ink_flex ul li{width: calc(50% - 5px)}

#layerPopup{max-width: 90%}


.sub_btn.sml{position: relative; margin-top: 20px}



.ilac{border-radius: 5px}

.ilac_center .ilac_big{height: 50px; width: 100%}
.ilac_center .ilac_big h2{font-size: 16px}

.ilac_flex_box .in_flex h2 {
        height: 50px;
        font-size: 16px;
    }

.ilac_center .box .in_box{padding: 25px; border-radius: 5px}

.ilac_center .box .in_box h3, .ilac_flex_box .in_flex .in_info p{font-size: 14px; line-height: 22px}


.ilac_flex_box .in_flex .in_info{border-radius: 5px}


.emt150 {
    height: 80px;
}

.small_title{margin-bottom: 30px}
    .small_title h2, .board_detail_title h2 {
        font-size: 18px;
    }
    
    

    .flex_step5 .box, .flex_step5 .box.w50 {
        padding: 25px 25px 25px 25px;
        height: auto;
        width: 100%;
        border-radius: 5px;
    }


    .icon_flex_5 .box {
        gap: 30px;
        flex: none;
        width: 100%;
        border-radius: 5px;
        padding: 25px;
    }

    .ceo .txt p, .ceo .txt h4, .history_flex ul li, .icon_flex_5 .box p, .bu_greet .txt p, .bu_greet .txt h4, ul.dist li, .product_flex .sub_title p, .employment_flex .box h3 {
        font-size: 16px;
        line-height: 24px;
    }

    .icon_flex_step p {
        font-size: 14px;
    }


.bu_greet .txt h3 {
    color: #1B1B1B;
    font-size: 18px;
    font-weight: bold;
    line-height: 34px;
    margin-bottom: 20px;
}

.bu_greet .txt p + p {
    margin-top: 20px;
}

.more_bu_btn{gap:10px}

.more_bu_btn a {
        flex: none;
        padding: 0 25px;
        font-size: 16px;
        height: 60px;
        border-radius: 5px;
    }

.more_bu_btn a span {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}



.flex_slide .box ul.dist li{font-size: 14px; line-height: 22px}

    .flex_slide .box {
        width: 100%;
        padding: 25px;
        border-radius: 5px;
    }

.slide_style01 .thum{border-radius: 5px}
.slide_style01 .slick-prev{left: -20px}
.slide_style01 .slick-next{right: -20px}


.r_box {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 25px;
    background: #fff;
}


    .flex_step5 .box .txt h2, .r_box.flex_r .box p, .board_list_txt h3 {
        font-size: 14px;
        line-height: 1.5;
    }
    
 
  
.r_box.flex_r .box {
    flex: none;
    text-align: center;
    width: 100%;
}  
 
.r_box.flex_r .box img{max-width: 100%}    

.r_box.flex_r .box .thum{border-radius: 5px; width: auto;}    


.product_flex .sub_title p{margin-top: 20px; font-size: 14px; line-height: 22px}

.esg_flex .txt p{font-size: 14px; line-height: 22px}
    .esg_flex {
        margin-top: 40px;
        display: flex;
        padding: 0;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        gap: 20px;
    }

.form_in ul li {
    width: 100%;
}

.form_in ul li label{font-size: 14px; margin-bottom: 5px}

.form_in input, .form_in select{height: 50px; padding: 0 15px; font-size: 14px}


.form_in textarea {
    background: #fff;
    height: 200px;
    line-height: 22px;
    border-radius: 5px;
    padding: 15px 15px;
    font-size: 14px;
    border: 0;
    width: 100%;
    border: 1px solid #ddd;
}

.form_in ul li .file_are button{font-size: 14px; height: 50px; line-height: 50px}
.form_in .common_btn{margin-top: 50px}



.gall_list_style {
    display: flex;
    gap: 30px 10px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}


    .gall_list_style li {
        width: calc(50% - 5px);
    }

.gall_list_style li .gall_img{border-radius: 5px}


.board_detail_content{padding: 50px 0}


    .product_flex .sub_title .sub_btn a, .board_common_btn_list .common_btn {
        height: 40px;
        font-size: 14px;
        border-radius: 5px;
    }


    .employment_flex .box {

        flex: none;
        border-radius: 5px;
        padding: 25px; text-align: center
    }

.employment_flex .box h3{margin-top: 20px}


    .welfare_flex .box {
        width: 100%;
        background: #fff;
        padding: 25px;
        border-radius: 5px;
        border: 1px solid #ddd;
        display: flex;
        gap: 20px;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        text-align: center
    }

.welfare_flex .box .icon{margin: 0 auto}

.welfare_flex .box .txt h2{font-size: 18px}

.welfare_flex .box .txt p{font-size: 14px;; line-height: 24px}


.employment_board_box {
    border: 1px solid #ddd;
    padding: 25px;
    border-radius: 5px;
    background: #F9F9F9;
    position: relative;
}

.employment_board_box .txt p{font-size: 12px; height: 30px; line-height: 30px; border-radius: 5px}
    .employment_board_box .txt h3 {
        font-size: 16px;
        line-height: 26px;
        margin-top: 10px;
    }


.employment_board_box .go_employ {
    position: relative;
    right: 0;
    top: 0;
    height: 40px;
    display: inline-flex;
    padding: 0 15px;
    font-size: 14px;
    color: #fff;
    background: #0073AE;
    border-radius: 5px;
    transform: translateY(0%);
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.15);
    margin-top: 30px;
}



.performance .tab {
        margin-bottom: 40px;
        gap: 15px;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
        height: 60px;
        border: 0px solid #ddd;
        border-radius: 5px;
        padding: 0;
        background: #fff;
        overflow-x: auto;
        flex-direction: row;
        width: 100%;
    }


.performance .tab__item a{font-size: 14px}

.tlb{overflow-x: auto}
.tlb table td, .tlb table th{font-size: 14px; padding:15px 10px }


}





@media (max-width: 360px) {

 
}





@media (max-width: 1024px) {

    .performance .tab {
        margin-bottom: 80px;
        gap: 15px;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
        height: auto;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 25px 50px;
        background: #fff;
        overflow-x: auto;
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
    }
    
    
    .esg_are .ani_img .txt{text-align: center}

	
}



@media (max-width: 860px) {
	
	.bu_dist_flex .small_title {
    width: 50%;
}
	
	
}


@media (max-width: 600px) {
	
	.tlb_title{margin-bottom: 15px}
	.tlb_title h3{font-size: 18px}
	
	.esg_are .ani_img .txt {
        text-align: center;
        padding: 20px;
    }
    
    .esg_are .ani_img .txt .box h4{font-size: 16px}
    .esg_are .ani_img .txt .box p{font-size: 12px; margin-top: 15px}
    
    .bu_dist_flex {
    display: flex;
    flex-wrap: wrap;}
    
	    .bu_dist_flex .small_title {
	    width: 100%;
	}
	
	.small_title p{font-size: 16px; margin-top: 10px}
	ul.dist li em{font-size: 14px}
    
	
}