@charset "utf-8";

/*pc*/
@media all and (min-width:1200px){
    .mobile{display: none;}
    .pc{display: block;}

    .page_gnb:hover h2{color: #e81444;}
    .page_gnb:hover h3{color: #e81444;}
}

/*tab*/
@media all and (max-width:1199px) and (min-width:768px){
    .mobile{display: none;}
    .pc{display: block;}

    /*sub_page_top*/
    .sub_top_wrap{height: 550px; }
    .sub_top_wrap .page_top_title{font-size: 32px;}
   
    /*page_bar*/
    #page_nav_bar{height: 50px;}
    #page_nav_bar .btn_home{width: 50px;; height: 50px;}
    #page_nav_bar .btn_home img{margin-top:9px; width: 16px;}
    #page_nav_bar .btn_home .text_home{margin-top: 2px;}
    #page_nav_bar .page_gnb_wrap{width: 170px;line-height: 50px;}
    #page_nav_bar .page_gnb_on{padding-left: 20px;font-size: 15px;}
    #page_nav_bar .page_gnb h2, #page_nav_bar .page_lnb_title{margin-left: 20px; line-height: 45px;}
    #page_nav_bar .page_gnb h3{margin-left: 20px; line-height: 45px;}
    .page_nav_open{ right: 20px;}
    .page_gnb:hover h2{color: #e81444;}
    .page_gnb:hover h3{color: #e81444;}
    #page_nav_bar .right{height: 50px;}

    /*sub_01_1*/
    .page_title{font-size: 28px}
    .page_text{font-size: 18px;}
    .page_text::after{height: 40px;} 

    /*sub_01_1 section02*/
    #sub_01_1_sec2 .slogan{font-size: 32px;}
    #sub_01_1_sec2 .slogan_text{margin: 0 auto; width: 90%; font-size: 17px;}

    /*sub_01_2 history*/
    #history_wrap{width: 100%;}
    .history_box{margin-bottom: 50px}
    .history_box:last-child{margin-bottom: 0px}
    .img_history{width: 45%;}
    .txt_history{padding: 15px 0;width: 45%;}
    .txt_history .txt_yy{font-size: 28px;}
    .txt_history .txt_yy::after{height: 35px;}
    .txt_history .txt_mm{font-size: 17px;}
    .txt_history .txt_mm span{margin-right: 8px;}
    .history_box_2n .txt_yy::after{margin-left: 95%;}

    /*sub_01_3 vision*/
    .vision_sec01_wrap .img_vision{width: 47%;}
    .vision_sec01_wrap .txt_vision{padding: 40px 0; width: 48%;}

    /*sub_01_3_sec02 vision*/
    #sub_01_3_sec02 .swiper-slide{padding: 50px 2%; margin-right: 2%; width: 24%;}
    #sub_01_3_sec02 .vision_con_title{margin: 30px 0 10px 0;}

    /*sub_01_4 section01*/
    .certification_wrap{margin: 0 auto; width: 95%;}
    .certification_wrap .certification{position: relative; float: left; width: 31%; margin-right: 2%;}
    .certification_wrap .certification:first-child::after{top: -20px; left: -20px; width: 70px; height: 70px; background-size: contain}

    /*sub_02_1 section01*/
    #sub_02_1 .business_wrap_01::before{top: -78px; left: 0%; font-size: 70px;}
    #sub_02_1 .business_wrap .left{height: 400px;}
    #sub_02_1 .business_wrap .right{padding: 40px;}
    #sub_02_1 .business_wrap .right .business_h1{font-size: 28px; }
    #sub_02_1 .business_wrap .right .business_h2{margin: 5px 0 20px 0; font-size: 20px;}
    #sub_02_1 .business_wrap .right .business_p{padding-top: 20px; font-size: 16px; }
    
    /*sub_02_2 section01*/
    #sub_02_2 .business_wrap{padding: 0 0 80px 0;}
    #sub_02_2 .business_wrap .left{width: 35%; height: 350px; border: 10px solid #f1f1ef;}
    #sub_02_2 .business_wrap .right{width: 62%; }

    #sub_02_2 .business_wrap .right .business_title_wrap{padding-left: 30px;}
    #sub_02_2 .business_wrap .right .business_title_wrap::before{width: 4px; height: 60px;}
    #sub_02_2 .business_wrap .right .business_h1{font-size: 14px;}
    #sub_02_2 .business_wrap .right .business_h2{font-size: 28px; }
    #sub_02_2 .business_wrap .right .business_p{padding: 40px 30px 40px 20px;}
    #sub_02_2 .business_wrap .right .business_p2{left: 30px; padding-left: 120px;}
    #sub_02_2 .business_wrap .right .business_p2::before{position: absolute; bottom: 0; left: 0; width: 110px; height: 1px; background-color: #b5b5b5; content: ""; display: block;}

    #sub_02_2 .business_wrap_2n .left{bottom: -10px; width: 62%; height: 480px; border: 10px solid rgba(255, 255, 255, 0); }
    #sub_02_2 .business_wrap_2n .left::before{top: -10px; right: -10px; width: 250px; height: 120px;}
    #sub_02_2 .business_wrap_2n .right{padding: 0; width: 35%;}
    #sub_02_2 .business_wrap_2n .right .business_p2{position: relative; left: inherit; padding-left: 0; padding-right: 120px; display: block; text-align: right;}
    #sub_02_2 .business_wrap_2n .right .business_p2::before{left: inherit; right: 0;}

    /*sub_02_3 section01*/
    #sub_02_3 .business_wrap{padding: 80px 0; }
    #sub_02_3 .business_wrap .container .txt_sub_business{width: 60%;}
    #sub_02_3 .business_wrap .container .txt_sub_business .business_top{font-size: 14px; }
    #sub_02_3 .business_wrap .container .txt_sub_business .business_h1{margin: 10px 0 40px 0; font-size: 24px;}
    #sub_02_3 .business_wrap .container .txt_sub_business .business_p{font-size: 16px;}
    #sub_02_3 .txt_sub_business{padding: 00px 50px 0 0;}
    #sub_02_3 .business_wrap_02 .txt_sub_business{padding-left: 50px; }
    #sub_02_3 .img_sub_business{width: 300px; height: 300px; border-radius:150px;}


}

/*mobile*/
@media all and (max-width:767px){
    .mobile{display: block;}
    .pc{display: none;}

    /*sub_page_top*/
    .sub_top_wrap{height: 300px; }
    .sub_top_wrap .page_top_title{font-size: 26px;}
    .sub_top_wrap .page_top_title::after{bottom: 15px; margin-left: -20px; width: 40px;}

    /*page_bar*/
    #page_nav_bar{height: 50px;}
    #page_nav_bar .container{margin: 0; width: 100%;}
    #page_nav_bar .left{width: 100%;}
    #page_nav_bar .btn_home{width: 60px; height: 50px;}
    #page_nav_bar .btn_home img{margin-top: 11px; width: 14px;}
    #page_nav_bar .btn_home .text_home{margin-top: 0px; font-size: 11px; font-weight: 300;}
    #page_nav_bar .page_gnb_wrap{width: 100%; line-height: 50px;}
    #page_nav_bar .page_gnb_on{padding-left: 30px;font-size: 14px; font-weight: 500;}
    #page_nav_bar .page_gnb h3{margin-left: 30px;font-size: 14px;}
    #page_nav_bar .right{display: none;}

    /*sub_01_1 section01*/
    .page_title{font-size: 22px;}
    .page_title::before{top: -2px; left: -14px; width: 14px; height: 14px; background-size: contain;}
    .page_text{margin-top: 10px; font-size: 15px; word-break: keep-all;}
    .page_text::after{margin: 10px auto;height: 30px;} 
    .img_about{width: 100%;}

    /*sub_01_1 section02*/
    #sub_01_1_sec2 .slogan{font-size: 20px;}
    #sub_01_1_sec2 .slogan::after{margin: 10px auto; height: 30px;}
    #sub_01_1_sec2 .slogan_text{width: 90%; font-size: 14px; font-weight: 300; color: #333; word-break: keep-all;}
    #sub_01_1_sec2 .slogan_end{margin-top: 30px; font-size: 14px;}
    #sub_01_1_sec2 .slogan_bg{margin-left: -50px;}
    #sub_01_1_sec2 .slogan_bg img{width: 100px;}

    /*sub_01_2 history*/
    #history_wrap{width: 100%;}
    #history_wrap::before{left: 0%;}
    .history_box{flex-direction: column-reverse; margin-bottom: 40px}
    .img_history{padding: 0 20px; width: 100%;}
    .ico_history{position: absolute; top: 20px; left: -6px;}
    .txt_history{padding: 10px 0px 20px 40px; width: 100%;}
    .txt_history .txt_yy{font-size: 20px; margin-bottom: 15px;}
    .txt_history .txt_yy::after{display: none;}
    .txt_history .txt_mm{font-size: 14px; line-height: 1.5;}
    .txt_history .txt_mm span{margin-right: 8px;}
    .history_box_2n{text-align: left;}

    /*sub_01_3 vision*/
    #sub_01_3 .container{width: 100%; margin: 0;}
    .vision_sec01_wrap .img_vision{width: 45%;}
    .vision_sec01_wrap .txt_vision{padding: 20px 10px 20px 0; box-sizing: border-box; width: 50%;}
    .en_title{font-size: 12px;}
    .vision_title{margin: 0px 0 20px 0; font-size: 20px;}
    .vision_text{font-size: 14px;}
    
    /*sub_01_3_sec02 vision*/
    .vision_sec2_title_wrap{background-color: #f8f8fa;}
    .vision_sec2_title_wrap .container{padding: 40px 30px;}
    #sub_01_3_sec02 .vision_swiper{margin-top: 00px; }
    #sub_01_3_sec02 .swiper-slide{padding: 30px 10px; margin-right: 00px; width: 75%; height: 250px;}
    #sub_01_3_sec02 .vision_con_title{margin: 40px 0 20px 0; font-size: 17px;}
    #sub_01_3_sec02 .vision_con_text{font-size: 14px;}

    /*sub_01_4 section01*/
    .certification_wrap{margin: 0 auto; width: 90%;}
    .certification_wrap .certification{position: relative; float: left; width: 48%; margin-right: 4%; margin-top: 10px;}
    .certification_wrap .certification:nth-child(2n){margin-right: 0;}
    .certification_wrap .certification:nth-child(1), .certification_wrap .certification:nth-child(2){margin-top: 0;}
    .certification_wrap .certification:first-child::after{top: -20px; left: -20px; width: 50px; height: 50px; background-size: contain}

    /*sub_01_5 section01*/
    .map_table_wrap{margin-top: 40px;}
    .map_table_wrap .map_table_title{font-size: 15px; font-weight: 500;}
    .map_table_wrap table{margin-top: 10px; border-top: 2px solid #dedede; width: 100%; border-collapse: collapse;}
    .map_table_wrap tr,td{padding: 15px 20px; font-size: 14px; word-break: keep-all;}
    .map_table_wrap .map_content_title{font-weight: 500;}

    /*sub_02_1 section01*/
    #sub_02_1 .business_wrap_01::before{position: absolute; top: -43px; left: 50%; margin-left: -152px; font-size: 38px; letter-spacing: -1.5;}
    #sub_02_1 .business_wrap .left{float: inherit; width: 100%; height: 60vw; border-radius: 28px;}
    #sub_02_1 .business_wrap .right{float: inherit; padding: 20px; width: 100%;}
    #sub_02_1 .business_wrap .right .business_h1{font-size: 20px; }
    #sub_02_1 .business_wrap .right .business_h2{margin: 0px 0 20px 0; font-size: 16px; word-break: keep-all;}
    #sub_02_1 .business_wrap .right .business_p{border-top: 1px solid #e81444; padding-top: 20px; font-size: 14px;}
    #sub_02_1 .business_wrap_2n{background-color: #fff;}
    #sub_02_1 .business_wrap_2n .left{float: inherit; border-radius:28px;}
    #sub_02_1 .business_wrap_2n .right{float: inherit; text-align: left;}

    /*sub_02_2 section01*/
    #sub_02_2 .business_wrap{display: block; padding: 0 5% 40px;}
    #sub_02_2 .business_wrap:last-child{padding: 40px 5% 5%;}
    #sub_02_2 .business_wrap .left{width: 100%; height: 50vw; border: 8px solid #f1f1ef;}
    #sub_02_2 .business_wrap .right{padding: 20px 0 0; width: 100%; }

    #sub_02_2 .business_wrap .right .business_title_wrap{padding-left: 20px;}
    #sub_02_2 .business_wrap .right .business_title_wrap::before{width: 3px; height: 50px;}
    #sub_02_2 .business_wrap .right .business_h1{font-size: 14px;}
    #sub_02_2 .business_wrap .right .business_h2{font-size: 20px;}
    #sub_02_2 .business_wrap .right .business_p{padding: 20px 0 20px 20px; font-size: 14px;}
    #sub_02_2 .business_wrap .right .business_p2{left: 20px; padding-left: 130px; font-size: 10px;}
    #sub_02_2 .business_wrap .right .business_p2::before{width: 120px;}

    #sub_02_2 .business_wrap_2n{padding: 40px 10%;background-color: #fafaf8; width: 110%; margin-left: -5%;}
    #sub_02_2 .business_wrap_2n .left{bottom: -8px; width: 100%; border: 8px solid rgba(255, 255, 255, 0); }
    #sub_02_2 .business_wrap_2n .left::before{top: -8px; right: -8px; width: 180px; height: 80px;}
    #sub_02_2 .business_wrap_2n .right{width: 100%; }
    #sub_02_2 .business_wrap_2n .right .business_p2{padding-left: 0; padding-right: 0; text-align: left;}
    #sub_02_2 .business_wrap_2n .right .business_p2::before{left: 100px; right: inherit;}

    /*sub_02_3 section01*/
    #sub_02_3 .business_wrap{padding: 40px 0; }
    #sub_02_3 .business_wrap.business_wrap_01{padding-top: 0; }

    #sub_02_3 .business_wrap .container{display: block; padding-top: 0;}
    #sub_02_3 .business_wrap .container .txt_sub_business{width: 100%; text-align: center;}

    #sub_02_3 .business_wrap .container .txt_sub_business .business_top{font-weight: 800; font-size: 13px;}
    #sub_02_3 .business_wrap .container .txt_sub_business .business_h1{margin: 5px 0 30px 0; font-size: 18px; }
    #sub_02_3 .business_wrap .container .txt_sub_business .business_p{ font-size: 14px;}


    #sub_02_3 .txt_sub_business{padding: 00px; margin-top: 30px;}
    #sub_02_3 .business_wrap_02 .txt_sub_business{padding: 00px !important;}
    #sub_02_3 .img_sub_business{margin: 0 auto; width: 250px; height: 250px; border-radius:125px;}






}

@media all and (max-width:767px) and (min-width: 460px){
    .certification_wrap .certification:first-child::after{top: -25px; left: -25px; width: 65px; height: 65px; background-size: contain}
}