@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap');
.black{color: #000; }
.blue{color: var(--main-color); }
.sub_inner{max-width: 1400px; margin: 0 auto 150px;}
.top_inner{max-width: 1400px; margin: 0 auto;}

.sub_visual{}
.sub_visual_box{position: relative; width: 100%; height: 530px; overflow: hidden;}
.sub_visual_box .sub_visual_txt{max-width: 1400px;  text-align: right; position: absolute; top: 30%; left: 50%; transform: translateX(-50%); z-index: 10; width: 90%;}
.sub_visual_box .sub_visual_txt h2{font-size: 70px; font-family: 'Teko', sans-serif; text-shadow: 0 10px 8px rgba(0,0,0,.4), 0 -2px 1px rgba(0,0,0,.3);}
.sub_visual_box .sub_visual_txt p{font-size: 20px; color: #fff;}
.sub_visual_box .sub_visual_txt h2 .black{color: #fff;}

.sub_page_visual{background-repeat: no-repeat; background-position: center; background-size: cover; animation: bg-active 5s; height: 100%; overflow: hidden;}
.sub_page_visual1 { background-image: url(../img/sub_visual_1.png); } 
.sub_page_visual2 { background-image: url(../img/sub_visual_2.png); } 
.sub_page_visual3 { background-image: url(../img/sub_visual_3.png); } 
.sub_page_visual4 { background-image: url(../img/sub_visual_4.png); } 
.sub_page_visual5 { background-image: url(../img/sub_visual_5.png); } 
.sub_tit{margin-top:100px;}
.sub_tit h3{font-size: 36px; text-align: center; font-weight: 600; position: relative;}
.sub_tit h3::before{content: ""; width: 2px; height: 50px; position: absolute; top: -90px; left: 50%; transform: translateX(-50%); background-color: var(--main-color);}
.sub_nav{display: flex; justify-content: flex-end; margin: 60px 0 30px 0; }
.sub_nav.bor{padding-bottom: 50px; border-bottom: 1px solid #000;}
.sub_nav li{color: #999; font-size: 14px; margin: 0 10px; position: relative;}
.sub_nav li:last-child{color: #000; font-weight: 600;}
.sub_nav li::after{content: ""; width: 1px; height: 15px; background-color: #999; position: absolute; top: 0; right: -10px; transform: skewX(-10deg);}
.sub_nav li:last-child::after{display: none;}

@keyframes bg-active { 
    0% { transform: scale(1.09); opacity: 0.9; } 
   100% { transform: scale(1); opacity: 1; } 
    }

/*about_top*/
.mobile_top{display: none; height: 60px; align-items: center; border: 1px solid #eee;}
.mobile_top > div{padding: 10px;}
.mobile_top .home{height: 100%; position: relative; width: 20%;}
.mobile_top .home::after{content: ""; width: 1px ; height: 30px; background-color: #000; position: absolute; top: 15px; right: 0;}
.mobile_top .home a{display: block; text-align: center; height: 100%;}
.mobile_top .home a i{font-size: 25px; margin-top: 5px;}
.mobile_top .second_dep{height: 100%;width: 80%;cursor: pointer; }
.mobile_top .second_dep .sub_dep_tit{font-size: 18px; height: 100%; display: flex; align-items: center; padding-left: 20px;}
.mobile_top .second_dep .sub_dep_tit span{display: inline-block; width: 200px;}
.mobile_top .mo_menu_list{position: relative ;z-index: 99; margin-top: 10px; background-color: var(--main-color); display: none;}
.mobile_top .mo_menu_list li{height: 45px;}
.mobile_top .mo_menu_list li a{display: flex; align-items: center; height: 100%; font-size: 18px; padding-left: 30px; color: #fff;}


.pc_top{display: flex;border: 1px solid #ddd; max-width: 1400px; margin: 0 auto 50px;}
.pc_top li{width:calc(100% / 3); height: 60px; transition: all .3s; border-right: 1px solid #ddd;}
.pc_top li:last-child{border-right: none;}
.pc_top li a{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 17px;}
.pc_top li.on{background-color: var(--main-color);}
.pc_top li.on a{color: #fff;}
.pc_top li:hover{background-color: var(--main-color);}
.pc_top li:hover a{color: #fff;}


/*인사말*/
.greetings_top_img{margin: 80px 0; text-align: center;}
.greetings_txt{display: flex; justify-content: space-between; }
.greetings_txt .greetings_left{width: 25%; color: var(--main-color); font-size: 4.2rem; font-weight: 700;}
.greetings_txt .greetings_right{width:70% ;}
.greetings_txt .greetings_right div{font-size: 1.8rem; margin: 30px 0; color: #333; line-height: 1.8;}




/*오시는길*/
.location{margin: 50px 0;}
.company_info{}
.company_info h2{font-size: 40px; border-bottom: 1px solid #ccc; font-family: 'Teko', sans-serif;}
.company_info .company_info_txt{}
.company_info .company_info_txt li{display: flex;margin: 20px 0;}
.company_info .company_info_txt li i{font-size: 20px;margin-right: 10px; color: var(--main-color);}
.company_info .company_info_txt li p{font-size: 20px; }
.company_info .company_info_txt li p span{font-weight: 600;display: inline-block; width: 100px;}
.company_info .company_info_txt li p em{font-style: normal;}


/*사업*/
.company3{margin-top: 50px;}
.com3_wrap{margin-bottom: 100px; }
.com3_tit{font-size: 2.6rem; position: relative; display: inline; padding-left: 20px;}
.com3_tit::after{content: "";width: 8px;height: 8px;border-radius: 3px;transform: rotate(45deg);background-color: var(--main-color);position: absolute;right: -20px;bottom: 0px;}
.com3_box{box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; background-color: #fff; border-radius: 20px; padding:100px 50px; position: relative; z-index: 5; margin-top: 30px; overflow: hidden;}
.com3_box h4{font-size: 2.4rem; margin-bottom: 30px;}
.com3_box p{font-size: 2rem; line-height: 1.8;}
.com3_box span{ font-size: 11rem; position: absolute; right: 0; bottom: -45px; z-index: -1; font-weight: 700; color: var(--main-color); opacity: 0.2;}
.values_list{display: flex; margin-top: 30px;}
.values_list li{width: calc(100% / 5 - 20px); margin: 0 10px;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; padding: 50px 20px; border-radius: 20px;}
.values_list li span{ color: var(--main-color); font-weight: 700; font-size: 2.5rem;}
.values_list li .values_icon{margin-top: 20px; text-align: center;}
.values_list li h3{font-size: 2rem;  text-align: center; color: #333; margin: 20px 0;}
.values_list li p{font-size: 1.6rem; color: #666;}


/*제품*/
.pro_list{display: flex; justify-content: space-between; align-items: center;}
.pro_list li{}
.pro_list .pro_img{border: 1px solid #ccc; width: 45%;}
.pro_list .pro_img img{width: 100%;}
.pro_list .pro_txt{width: 50%;}
.pro_list .pro_txt h2{font-size: 2.8rem;}
.pro_list .pro_txt p{font-size: 1.8rem; margin: 30px 0 50px; line-height: 1.8;}
.pro_list .pro_txt .pro_table{overflow-x: auto; margin-top: 50px;}
.pro_list .pro_txt .pro_table table{min-width: 500px; width: 100%; border-collapse: collapse; }
.pro_list .pro_txt .pro_table table tr th{background-color: #f7f7f7; text-align: center; padding: 20px 10px; border-bottom: 1px solid #ccc; font-size: 1.8rem;}
.pro_list .pro_txt .pro_table table tr th:first-child{border-right: 1px solid #ccc;}
.pro_list .pro_txt .pro_table table tr td{text-align: center; padding: 20px 10px; border-bottom: 1px solid #ccc; font-size: 1.7rem;}
.pro_list .pro_txt .pro_table table tr td:first-child{border-right: 1px solid #ccc;}
.pro_list .pro_txt .pro_table table tr td.bor{border-right: 1px solid #ccc;}

/*사업분야*/
.business_list{display: flex; flex-wrap: wrap;}
.business_list li{width: calc(100% / 3 - 20px); padding: 50px 20px; border-radius: 20px; margin: 20px 10px; text-align: center;}
.business_list li span{color:#fff ; font-weight: 800; font-size: 2rem; background-color: var(--main-color); padding: 9px 10px; border-radius: 50%; display: inline-block; transform: translateY(-20px);}
.business_list li .business_img{ text-align: center; border: 1px solid #ccc;}
.business_list li .business_img img{width: 100%;}
.business_list li h3{font-size: 2.2rem;  text-align: center; color: #333; }








/*****************************반응형************************************/
@media all and (max-width:1540px){
    .sub_inner{width: 90%;}
    .pc_top{width: 90%;}

  

}
@media all and (max-width:1380px){
   
}
@media all and (max-width:1280px){
    /*sub_top*/
    .sub_visual_box .sub_visual_txt h2{font-size: 60px;}
    .top_inner{width: 95%;}

   


}
@media all and (max-width:1224px){
   
    
}
@media all and (max-width:1024px){

    /*sub_top*/
    .sub_visual_box .sub_visual_txt{top: 50px;}
    .sub_visual_box .sub_visual_txt h2{font-size: 50px;}
    .sub_visual_box .sub_visual_txt p{font-size: 18px;}
    .sub_tit{margin-top: 60px;}
    .sub_tit h3{font-size: 30px;}

     /*오시는길*/
     .company_info h2{font-size: 36px;}
    

  
}
@media all and (max-width:800px){
    /*sub_top*/
    .sub_visual_box{height: 400px;}
    .sub_page_visual2{background-position: left;}
    .sub_visual_box .sub_visual_txt{background-color: rgba(255,255,255,0.5); top: 50%; transform: translate(-50%, -50%); text-align: center; padding: 20px;}
    .sub_visual_box .sub_visual_txt h2{font-size: 40px;}
    .sub_visual_box .sub_visual_txt p{font-size: 16px; color: #000;}
    .sub_tit{margin-top: 40px;}
    .sub_tit h3{font-size: 26px;}
    .sub_tit h3::before{height: 40px; top: -70px;}
    .sub_nav{margin: 30px 0;}


     /*오시는길*/
     .company_info h2{font-size: 32px;}
     .company_info .company_info_txt li p{font-size: 18px;}
   
}
@media all and (max-width:650px){
    .pc_top{display: none;}
    .mobile_top{display: flex; }

    /*opk korea*/
    .company_video{flex-direction: column; margin-top: 50px}
    .company_video li{width: 100%; margin: 15px 0;}
    .company_video li h3{margin-bottom: 20px;}

    /*인증및장비*/
    .certi_wrap{margin-top: 50px;}

    /*제품소개*/
    .product_list li{width: calc(100% / 2 - 20px);}
  
   

}
@media all and (max-width:500px){
    /*sub_top*/
    .sub_visual_box .sub_visual_txt{width: 95%;}
    .sub_visual_box .sub_visual_txt h2{font-size: 30px;}
    .sub_visual_box .sub_visual_txt p{font-size: 15px;}
    .sub_tit{margin-top: 20px;}
    .sub_tit h3{font-size: 22px;}
    .sub_tit h3::before{height: 30px; top: -50px;}
    .mobile_top .second_dep .sub_dep_tit{font-size: 17px;}
    .mobile_top .mo_menu_list li a{font-size: 16px;}

    /*오시는길*/
    .company_info h2{font-size: 28px;}
    .company_info .company_info_txt li p{font-size: 16px;}
 
}
@media all and (max-width:480px){

    /*sub_top*/
    .sub_visual_box{height: 350px;}
    .sub_visual_box .sub_visual_txt h2{font-size: 24px;}
    .sub_visual_box .sub_visual_txt p{font-size: 14px;}
    .sub_tit{margin-top: 10px;}
    .sub_tit h3{font-size: 18px;}
    .sub_tit h3::before{top: -40px; height: 25px;}
    .sub_nav{margin: 20px 0;}
    .sub_nav li{font-size: 12px;}

    /*오시는길*/
    .company_info .company_info_txt li p em{display: block; margin-top: 5px;}


    
}
@media all and (max-width:400px){
    .mobile_top .mo_menu_list li a{font-size: 15px;}

  
}