@charset "utf-8";

@media only screen and (max-width: 1760px) {

    .section.sec1 .sec_grid{padding-left: 100px; padding-right: 100px; width: auto; margin: 0;}
}

@media only screen and (max-width: 1600px) {
    :root {
        --s-gap1: 30px;
    }
    .section.sec1 .list_business .num,
    .section.sec1 .list_business .txt_en{top: 25px;}
    .section.sec1 .list_business .bottom_text .txt_set{padding: 0 var(--s-gap1) var(--s-gap1)}

    .section.sec2 .sec_carousel{padding-right: 40px;}
}

@media only screen and (max-width: 1360px) {
    :root {
        --main-gap: 40px;
        --s-gap1: 25px;
    }
    .main_grid{padding-left: var(--main-gap); padding-right: var(--main-gap); margin:0; width:auto}
    #header #gnb > ul > li{margin: 0 20px;}
    #sub_nav > .main_grid{padding-left: 0;}

    .section.sec1 .sec_grid{padding-left: 70px; padding-right: 70px;}
    .section.sec1 .list_business .num,
    .section.sec1 .list_business .txt_en{top: 25px;}

    .pg_cert .list_cert > ul{margin-left: -20px; margin-right: -20px;}
    .pg_cert .list_cert > ul > li{padding: 20px 20px;}

    .pg_loc .info_map{padding-bottom: 0;}
    .pg_loc .info_map .info_pannel{margin-top: 0;}

}

@media only screen and (max-width: 1280px) {
    #header h1 .logo{width: 140px;}
    #header #gnb > ul > li:first-child{display: none;}
    #header #gnb > ul > li{margin: 0 15px;}
    #header #gnb > ul > li > a{font-size: 15px;}

    .section.sec1 .list_business > ul > li{width: calc(33.33333333333% - 26px);}
    .section.sec1 .list_business .bottom_text .txt_set .title{font-size: 24px; line-height: 32px;}
    .section.sec1 .list_business .bottom_text .txt_set p{font-size: 14px;}

    .detail_prod .thumb{width: 50%;}
    .detail_prod .info_prod{width: 50%; padding-left: 60px;}
    .detail_prod .info_prod .tit_prod .title{font-size: 34px; margin-top: 7px;}

    .pg_about .sec1 .text_area .title{font-size: 45px; line-height: 50px; margin-top: 18px;}
    .pg_about .sec2{margin-top: 50px;}
    .pg_about .sec2 .img_set > div{width: calc(50% - 20px);}
    .pg_about .sec2 .img_set .txt_set .title{width: 74px;}
    
    .pg_history .history .list_history{width: calc(100% - 280px);}
    .pg_history .history .list_history .year{width: 120px;}
    .pg_history .history .list_history .ct_history{width: calc(100% - 120px);}

    .pg_esg .list_esg > ul > li{padding: 40px 0;}
    .pg_esg .list_esg .text_box{padding-left: 60px;}
    .pg_esg .list_esg > ul > li:nth-child(even) .text_box{padding-right: 60px;}

    .pg_business .list_business > ul > li > div{width: calc(50% - 20px);}
    .pg_business .list_business .text_area .box_set > div{width: calc(33.333333333% - 12px);}
}

@media only screen and (max-width: 1200px) {
    :root {
        --header-height: 120px;
    }
    .button1{padding: 0 46px;}
    .button1.s1{padding: 0 38px;}
    #header .right_set .lang_set{margin-right: 14px;}
    #header .right_set .lang_set > ul > li{font-size: 15px;}
    #header .right_set .lang_set:hover{width: 180px;}
    #footer .inner_footer .logo_f{display: none;}
    #sub_vis .inner_vis{height: 260px;}
    #sub_vis .tit_cat .txt_en{font-size: 13px;;}
    #sub_vis .tit_cat .title{font-size: 50px; margin-top: 12px;}
    
    .fixed_element .scroll_text{display: none;}
    #main_visual .sns_set{top: auto; bottom: var(--main-gap); flex-direction: row;}
    #main_visual .sns_set.vt1 a{margin: 0 16px 0 0;}
    #main_visual .sns_set.vt1 a:last-child{margin-right: 0;}

    .section.sec1{padding: 120px 0;}
    .section.sec1 .sec_grid{padding-left: var(--main-gap); padding-right: var(--main-gap);}
    .section.sec1 .list_business > ul > li{width: calc(33.33333333333% - 20px);}
    .section.sec1 .list_business .bottom_text .txt_set p{display: none;}
    .section.sec1 .list_business .bottom_text::after{height: 50px;}
    .section.sec2{padding: 120px 0;}
    .section.sec2 .sec_text .sec_title .main_text{font-size: 38px; line-height: 48px;}
    .section.sec2 .sec_text .sec_title p{font-size: 16px;}
    .section.sec2 .sec_text .button{margin-top: 170px;}
    .section.sec2 .sec_carousel{padding-right: 0;}
    .section.sec2 .sec_carousel .prod1 img,
    .section.sec2 .sec_carousel .prod2 img{max-width: 480px;}
    .section.sec3{padding: 120px 0;}
    .section.sec3 .list_esg > ul > li{width: calc(33.33333333333% - 26px); padding: 20px;}
    #main #gototop{display: block;}

    .list_prod > ul{grid-template-columns: repeat(3, 1fr);}

    .pg_esg .list_esg .esg1 .text_box .tit_set,
    .pg_esg .list_esg .esg2 .text_box .tit_set,
    .pg_esg .list_esg .esg3 .text_box .tit_set{background: none;}
    .pg_loc .sec_map{height: 470px;}

    .pg_business .list_business .text_area p .dspn{display: none;}
    
}

@media only screen and (max-width: 1100px) {

    .grid2{padding-left: var(--main-gap); padding-right: var(--main-gap); margin:0; width:auto}     
}

@media screen and (max-width: 1200px) and (min-width: 768px) {

    .pg_esg .list_esg .text_box .tit_set{padding: 30px 0;}
    .pg_esg .list_esg .text_box .tit_set .tit_en{font-size: 28px; margin-top: 5px;}
    .pg_esg .list_esg .text_box .txt_set .title{font-size: 24px;}
    .pg_esg .list_esg .text_box .txt_set p{font-size: 14px; line-height: 24px; margin-top: 7px;}
}



@media only screen and (max-width: 1023px) {
    :root {
        --s-gap1: 20px;
        --header-height: 100px;
    }
    .t_dsp{display:block}
	.t_dspn{display:none;}

    .button1{padding: 0 42px;}
    .button1.s1{padding: 0 36px;}
    #header #gnb{display: none;}
    #header .right_set .lang_set{display: none;}
    #header h1 .logo{width: 138px;}
    #footer .footer_menu > ul > li > a{font-size: 13px;}
    #footer .inner_footer{flex-direction: column; align-items: center;}
    #footer .inner_footer .address{flex-direction: column; align-items: center;}
    #footer .inner_footer .logo_f{display: block; padding-top: 0; margin-right: 0; margin-bottom: 25px;}
    #footer .inner_footer .logo_f img{width: 124px;}
    #footer .inner_footer address{text-align: center;}
    #footer .inner_footer address > ul > li{justify-content: center;}
    #footer .inner_footer address .item{width: auto; margin-right: 10px;}
    #footer .inner_footer address .item .spc1{display: none;}
    #footer .right_set{width: 100%; align-items: center; margin-top: 40px;}
    #family_site{width: 320px;}
    #footer .right_set .sns_set{margin-top: 76px;}

    #sub_vis .inner_vis{height: 260px;}
    #sub_vis .tit_cat .title{font-size: 48px;}
    #sub_nav{font-size: 15px;}
    #tabs{margin-top: 30px; margin-bottom: 30px;}
    #tabs > ul > li > a{height: 54px; font-size: 15px}
    .pg_title{text-align: center; padding-top: 75px;}
    .pg_title .title{font-size: 35px;}
    .pg_title .title1{font-size: 35px;}

    #main_visual .mvis_area .mvis_text .main_text{font-size: 56px;}

    .section.sec1{padding: 100px 0;}
    .section.sec1 .sec_title .title{font-size: 38px;}
    .section.sec1 .sec_title p{font-size: 16px;}
    .section.sec1 .list_business .num,
    .section.sec1 .list_business .txt_en{top: 20px;}
    .section.sec1 .list_business .bottom_text .txt_set .title{font-size: 20px;}

    .section.sec2{padding: 100px 0;}
    .section.sec2 .sec_text{position: static; width: 100%; text-align: center;}
    .section.sec2 .sec_text .button{display: none;}
    .section.sec2 .sec_text .swiper-button-next,
    .section.sec2 .sec_text .swiper-button-prev{top: calc(50% + 45px);}
    .section.sec2 .sec_text .swiper-button-prev{left: 40px;}
    .section.sec2 .sec_text .swiper-button-next{left: auto; right: 40px;}
    .section.sec2 .sec_carousel{width: 100%; margin-top: 50px;}
    .section.sec2 .sec_carousel .prod{text-align: center;}
    .section.sec2 .sec_carousel .prod1 img,
    .section.sec2 .sec_carousel .prod2 img{max-width: 440px;}
    .section.sec2 .sec_carousel .button{display: block;}

    .section.sec3{padding: 100px 0;}
    .section.sec3 .list_esg > ul > li{width: calc(33.33333333333% - 20px); padding: 20px 15px;}
    .section.sec3 .list_esg .txt_set .title{font-size: 18px; padding-top: 88px;}
    .section.sec3 .list_esg .txt_set .title.ico1{background: url('../images/contents/ico_esg2_1.png') no-repeat center 10px; background-size: 58px auto;}
    .section.sec3 .list_esg .txt_set .title.ico2{background: url('../images/contents/ico_esg2_2.png') no-repeat center 25px; background-size: 81px auto;}
    .section.sec3 .list_esg .txt_set .title.ico3{background: url('../images/contents/ico_esg2_3.png') no-repeat center 14px; background-size: 58px auto;}
    .section.sec3 .list_esg .txt_set p{font-size: 14px; margin-top: 10px;}

    .list_prod > ul{grid-auto-rows: minmax(270px, auto);}
    .list_prod > ul > li .thumb > img{max-width: 200px;}
    .list_prod > ul > li .title{max-width: 200px; font-size: 15px; line-height:22px}

    .detail_prod{padding-top: 60px;}
    .detail_prod .tabs_prod{width: 100%; margin-bottom: 60px;}    
    .detail_prod .thumb{width: 100%; max-width: 100%; text-align: center;}
    .detail_prod .thumb > img{max-width: 480px;}
    .detail_prod .info_prod{width: 100%; padding-left: 0; margin-top: 50px;}
    .detail_prod .info_prod .button{text-align: center;}
    
    .pg_about{padding-bottom: 80px;}
    .pg_about .sec1{margin-top: 55px;}
    .pg_about .sec1 > div{width: 100%;}
    .pg_about .sec1 .text_area .title{font-size: 43px; margin-top: 13px;}
    .pg_about .sec1 .txt_set{margin-top: 30px;}
    .pg_about .sec2{margin-top: 45px;}
    .pg_about .sec2 .logo_text{padding-top: 84px;}
    .pg_about .sec2 .logo_text::before{height: 40px;}
    .pg_about .sec2 .logo_text .logo img{width: 160px;}
    .pg_about .sec2 .main_text{font-size: 23px; margin-top: 22px;}
    .pg_about .sec2 .img_set{margin-top: 34px;}
    .pg_about .sec2 .img_set .txt_set{margin-top: 18px;}
    .pg_about .sec2 .img_set .txt_set .title{width: 100%; margin-bottom: 5px;}

    .pg_history{padding-top: 78px; padding-bottom: 100px;}
    .pg_history .history .tit_set{width: 100%;}
    .pg_history .history .list_history{width: 100%; margin-top: 30px;}
    .pg_history .history .list_history .year{width: 140px;}
    .pg_history .history .list_history .ct_history{width: calc(100% - 140px);}

    .pg_esg .list_esg{margin-top: 30px;}
    .pg_esg .list_esg > ul > li{padding: 30px 0;}
    .pg_esg .list_esg .text_box{padding-left: 40px;}
    .pg_esg .list_esg > ul > li:nth-child(even) .text_box{padding-right: 40px;}

    .pg_business .list_business > ul > li{margin-bottom: 60px;}
    .pg_business .list_business > ul > li > div{width: 100%;}
    .pg_business .list_business .text_area{border-top: 0}
    .pg_business .list_business .text_area .box_set > div{width: calc(33.333333333% - 30px);}
    .pg_business .list_business .text_area .title{font-size: 34px;}
    .pg_business .list_business > ul > li:nth-child(even) .sec_img{order: 1;}
    .pg_business .list_business > ul > li:nth-child(even) .text_area{order: 2;}

    .pg_cert .list_cert > ul > li{width: 33.333333333333%;}


}

@media only screen and (max-width: 767px) {
    :root {
        --main-gap: 20px;
        --s-gap1: 25px;        
        --header-height: 80px;
        --sticky-height: 80px;
        --subnav-height: 50px;
    }
    #container{padding-top: 0;}
    .m_dsp{display:block !important}
	.m_dspn{display:none !important}

    .button1,
    .button1.s1{padding: 0 34px;}
    #header h1 .logo,
    #header h1 .s_logo,
    #right_sidebar .top_sidenav .logo img{width: 108px;}
    #btn_sidebar{background-size: 28px auto}

    #footer .footer_menu{height: 52px;}
    #footer .footer_menu > ul > li:after{margin: 0 12px;}
    #footer .inner_footer .logo_f img{width: 108px;}
    #footer .inner_footer address > ul > li{flex-direction: column; margin-bottom: 18px;}
    #footer .inner_footer address .item{width: 100%}
    #footer .inner_footer address .vl{justify-content: center;}
    #footer .inner_footer address .copyright{font-size: 10px; margin-top: 35px;}
    #family_site{width: calc(100% - 40px);}
    
    #sub_vis .inner_vis{height: 160px;}
    #sub_vis .tit_cat .txt_en{font-size: 12px;}
    #sub_vis .tit_cat .title{font-size: 36px;}
    #sub_nav{font-size: 14px;}
    #sub_nav .a_text{display: none;}
    #sub_nav > .main_grid{padding-right: 0;}
    #sub_nav > .main_grid > ul{width: 100%;}
    #sub_nav > .main_grid > ul > li{flex: 1;}
    #sub_nav > .main_grid > ul > li.btn_home{display: none;}
    #tabs{margin-top: 25px; margin-bottom: 20px;}
    #tabs > ul > li{flex: 1 1 50%;}
    #tabs > ul > li:nth-child(1) > a,
    #tabs > ul > li:nth-child(2) > a{border-bottom: 0;} 
    #tabs > ul > li:nth-child(even) > a{border-right: 1px solid #ebebeb;}
    #tabs > ul > li > a{height: 50px;}
    .prod_title{font-size: 26px; padding-top: 50px;}
    .pg_title{padding-top: 60px;}
    .pg_title .title{font-size: 29px;}
    .pg_title .title1{font-size: 29px;}
    .pg_title p{font-size: 15px; margin-top: 15px;}
    .pg_title .txt_en{font-size: 13px; margin-top: 18px;}

    .sec_board .bo_top{padding-bottom: 10px;}
    .sec_board .bo_top .search input[type="text"]{width: 120px;}
    

    #main_visual .mvis_area .mvis_text .txt_en{font-size: 15px;}
    #main_visual .mvis_area .mvis_text .main_text{font-size: 36px; line-height: 45px; margin-top: 15px;}
    #main_visual .mvis_area .mvis_text p{font-size: 15px; line-height: 24px;}
    #main_visual .sns_set.vt1 a{margin: 0 10px 0 0;}

    .section.sec1{padding: 80px 0;}
    .section.sec1 .sec_title .title{font-size: 34px;}
    .section.sec1 .list_business{margin-top: 40px;}
    .section.sec1 .list_business > ul > li{width: 100%; margin-bottom: 20px;}
    .section.sec1 .list_business > ul > li:last-child{margin-bottom: 0;}
    .section.sec1 .list_business .thumb::after{content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.1);}
    .section.sec1 .list_business .num,
    .section.sec1 .list_business .txt_en{top: 30px;}
    .section.sec1 .list_business .bottom_text .txt_set{padding: 0 var(--s-gap1) 30px;}
    .section.sec1 .list_business .bottom_text .txt_set .title{font-size: 22px;}
    .section.sec1 .list_business .bottom_text .txt_set p{display: block;}
    .section.sec2{padding: 80px 0;}
    .section.sec2 .sec_text .sec_title .txt_en{font-size: 15px;}
    .section.sec2 .sec_text .sec_title .main_text{font-size: 30px; line-height: 43px; margin-top: 15px;}
    .section.sec2 .sec_text .swiper-button-next,
    .section.sec2 .sec_text .swiper-button-prev{display: none;}
    .section.sec2 .sec_carousel .prod{padding: 0 30px;}
    .section.sec2 .sec_carousel .button{margin-top: 60px;}
    .section.sec3{padding: 80px 0;}
    .section.sec3 .sec_title .sub_text{font-size: 15px;}
    .section.sec3 .sec_title .title{font-size: 34px;}
    .section.sec3 .sec_title p{font-size: 15px; margin-top: 15px;}
    .section.sec3 .list_esg{margin-top: 40px;}
    .section.sec3 .list_esg > ul > li{width: 100%; margin-bottom: 20px; background-color: rgba(0,0,0,.15);}
    .section.sec3 .list_esg > ul > li:last-child{margin-bottom: 0;}
    .section.sec3 .list_esg .txt_set .title{font-size: 20px; padding-top: 90px}
    .section.sec3 .list_esg .txt_set p{font-size: 15px;}

    .list_prod > ul{grid-template-columns: repeat(2, 1fr);}
    .list_prod > ul{grid-auto-rows: auto;}
    .list_prod > ul > li{padding: 16px 10px;}
    .list_prod > ul > li .thumb > img{max-width: none;}
    .list_prod > ul > li .title{max-width: 140px; font-size: 14px; line-height: 18px; margin-top: 12px;}
    .list_prod > ul > li.new_prod{padding: 0;}

    .detail_prod{padding-top: 40px;}
    .detail_prod .tabs_prod{margin-bottom: 40px;}    
    .detail_prod .tabs_prod > ul > li > a{height: 45px; font-size: 15px;}
    .detail_prod .info_prod{width: 100%; padding-left: 0; margin-top: 20px;}
    .detail_prod .info_prod .tit_prod .cat{font-size: 15px;}
    .detail_prod .info_prod .tit_prod .title{font-size: 28px; line-height: 38px;}
    .detail_prod .info_prod .list_spec > ul > li{font-size: 14px;}
    .detail_prod .info_prod .list_spec .item{width: 82px;}

    .pg_about{padding-bottom: 40px;}
    .pg_about .pg_title{display: none;}
    .pg_about .sec1{margin-top: 70px;}
    .pg_about .sec1 .text_area{text-align: center;}
    .pg_about .sec1 .text_area .txt_en{font-size: 15px;}
    .pg_about .sec1 .text_area .title{font-size: 34px; line-height: 42px; margin-top: 7px;}
    .pg_about .sec1 .txt_set{margin-top: 30px; text-align: center;}

    .pg_about .sec2{margin-top: 36px;}
    .pg_about .sec2 .logo_text{padding-top: 64px;}
    .pg_about .sec2 .logo_text::before{height: 30px;}
    .pg_about .sec2 .logo_text .logo img{width: 136px;}
    .pg_about .sec2 .main_text{word-break: keep-all;}
    .pg_about .sec2 .img_set{margin-top: 34px;}
    .pg_about .sec2 .img_set > div{width: 100%; margin-bottom: 40px;}
    .pg_about .sec2 .img_set .txt_set{margin-top: 18px;}
    .pg_about .sec2 .img_set .txt_set .title{width: 100%; margin-bottom: 5px;}

    .pg_esg .list_esg{margin-top: 20px;}
    .pg_esg .list_esg > ul > li{padding: 25px 0;}
    .pg_esg .list_esg > ul > li > div{width: 100%;}
    .pg_esg .list_esg .text_box{padding-left: 0;}
    .pg_esg .list_esg > ul > li:nth-child(even) .image1{order: 1;}
    .pg_esg .list_esg > ul > li:nth-child(even) .text_box{padding-right: 0; order: 2;}
    .pg_esg .list_esg .text_box .tit_set{padding: 30px 0 40px;}
    .pg_esg .list_esg .text_box .tit_set .txt_en{font-size: 15px;}
    .pg_esg .list_esg .text_box .tit_set .tit_en{font-size: 30px; margin-top: 8px;}
    .pg_esg .list_esg .text_box .txt_set .title{font-size: 22px;}
    .pg_esg .list_esg .text_box .txt_set p{font-size: 15px;}

    .pg_business .list_business{margin-top: 30px;}
    .pg_business .list_business > ul > li{margin-bottom: 40px;}
    .pg_business .list_business .text_area{padding-top: 25px}
    .pg_business .list_business .text_area .box_set > div{width: calc(33.333333333% - 10px);}
    .pg_business .list_business .text_area .title{font-size: 28px;}
    .pg_business .list_business .text_area .box_set .box .inner_box{height: 86px; font-size: 15px;}
    .pg_business .list_business .text_area .box_set .txt1{font-size: 14px; line-height: 20px;}

    .pg_history{padding-top: 56px; padding-bottom: 80px;}
    .pg_history .history .tit_set .sub_text{font-size: 15px;}
    .pg_history .history .tit_set .title{font-size: 32px;}
    .pg_history .history .list_history{margin-top: 25px;}
    .pg_history .history .list_history .year{width: 74px; font-size: 22px; padding-top: 18px;}
    .pg_history .history .list_history .ct_history{width: calc(100% - 74px);}
    .pg_history .history .list_history .ct_history > p{font-size: 15px; line-height: 24px; padding-left: 8px; text-indent: -8px; margin-bottom: 10px;}

    .pg_cert{padding-bottom: 70px;}
    .pg_cert .list_cert{margin-top: 30px;}
    .pg_cert .list_cert > ul{margin-left: -10px; margin-right: -10px;}
    .pg_cert .list_cert > ul > li{width: 50%; padding: 15px 10px;}
    .pg_cert .list_cert .title{font-size: 15px;}

    .pg_news{padding-bottom: 0}
    .pg_news .sec_board{margin-top: 30px;}

    .pg_loc .sec_map{height: 310px;}
    .pg_loc .info_pannel{padding-left: 0; padding-right: 0;}
    .pg_loc .info_map .info_pannel > ul > li{flex: 0 1 50%;}
    .pg_loc .info_map .info_pannel > ul > li:nth-child(1),
    .pg_loc .info_map .info_pannel > ul > li:nth-child(2){margin-bottom: 40px;}

    .request input.ip1{padding-left: 12px;}
    .request textarea.tt1{height:134px; padding:10px 12px;}
    .request textarea.tt2{height:170px; padding:10px 12px;}
    .request .sec_ip > li.lo_dv3 > div{flex: 1 1 100%}
    .request .btn_set .btn1{width: 140px; height: 48px; font-size: 15px;}
    .pg_request{padding-bottom: 70px;}
    .pg_request .request{margin-top: 35px;}

    
}


@media only screen and (max-width: 500px) {

    .sec_board .bo_top .total,
    .sec_board .bo_top .search select{font-size: 13px;}
    .sec_board .bo_basic_list tbody .tdb{padding-left: 0;}
    .sec_board .bo_basic_list tbody .tdb a{font-size: 14px;}
    .sec_board .bo_basic_list td.tdb span.date{font-size: 12px; padding-top: 5px;}
    .sec_board .bo_basic_view th span.date{font-size: 13px; margin-top: 7px;}
    .sec_board .bo_basic_view > table th{padding: 15px 0;}

}