
/*---------- pc --------------------------------------------------------------*/

@media (min-width:1200px){
#cont_pc{width:100%;}
#cont_pc .title_group{width: 1200px; margin:0 auto; height: 221px; margin-bottom: 131px;  box-sizing: border-box; padding-top:125px; }
#cont_pc .title_group .title_bar{width:40px; height:6px; background-color: #2BA439; margin: 0 auto 11px}
#cont_pc .title_group h2{color:#2BA439; font-weight: bold; text-align: center; font-size:16px; line-height:16px;}
#cont_pc .title_group h1{text-align: center; color:#2BA439; font-weight: 800; font-size:40px; margin-top:22px; line-height:40px}


#cont_pc .cards{width:1200px; margin:0 auto; padding:80px; border:1px solid #2BA439; border-radius: 20px; margin-bottom:48px; background-color: #fff;}
#cont_pc .cards:last-child{margin-bottom:128px}
#cont_pc .cards h3{font-size:26px; border-left:5px solid #2BA439; padding-left:16px; margin-bottom:22px}
#cont_pc .cards .explain{width:996px; margin:0 auto 56px; text-align: justify; font-size:19px;}
#cont_pc .cards .card_img{width:1036px; height:439px; background-color: #ddd; margin:0 auto 56px;}
#cont_pc .cards .card_li{width:996px; margin:0 auto; overflow: hidden;}
#cont_pc .cards .card_li>li{width:100%; float:left; margin-bottom:16px;}
#cont_pc .cards .card_li>li:last-child{margin-bottom:0}
#cont_pc .cards .card_li>li h4,#cont_pc .cards .card_li>li .info{float:left;}
#cont_pc .cards .card_li>li h4{width:158px; font-size:19px; border-right:2px solid #000; box-sizing: border-box;margin-right:25px;}
#cont_pc .cards .card_li>li .info{width:813px; font-size:19px;}
#cont_pc .cards .card_li>li .info li{font-size:19px; list-style-type: disc; line-height: 26px; margin-left:20px}

#cont_pc .card_1 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_1.png);}
#cont_pc .card_2 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_2.png);}
#cont_pc .card_3 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_3.png);}
#cont_pc .card_4 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_4.png);}
#cont_pc .card_5 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_5.png);}
#cont_pc .card_6 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_6.png);}
#cont_pc .card_7 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_7.png);}
#cont_pc .card_8 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_8.png);}
#cont_pc .card_9 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_9.png);}
#cont_pc .card_10 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_10.png);}
}





/*--------------- tablet ----------------------------------*/

@media (min-width:768px) and (max-width:1199px){


    #cont_pc{width:100%}

    .title_group{width:calc(100% - 80px); padding:54px 0 60px; border-bottom:1px solid #2BA439; margin:0 auto 70px}
    .title_group .title_bar{width:25px; height:4px; background-color: #2BA439; margin:0 auto; ;}
    .title_group h2{font-size:15px; line-height: 30px; margin:0 auto 12px; text-align: center; color:#2BA439; font-weight:700}
    .title_group h1{font-size:30px; text-align: center;  color:#2BA439; font-weight:800}
    
    .cards{width:calc(100% - 80px); margin:0 auto; box-sizing: border-box; padding:35px 30px; border:1px solid #2BA439; border-radius: 15px; margin-bottom:35px}
    
    #cont_pc .cards h3{font-size:26px; border-left:5px solid #2BA439; padding-left:16px; margin-bottom:22px}
    #cont_pc .cards .explain{width:100%; margin:0 auto 35px; text-align: justify; font-size:19px;}
    #cont_pc .cards .card_img{width:100%; height:439px; background-color: #ddd; margin:0 auto 56px;}
    #cont_pc .cards .card_li{width:100%; display: flex; flex-direction: column; justify-content: space-between; gap:16px}
    #cont_pc .cards .card_li>li{width:100%; display: flex; flex: row; justify-content: space;  font-size:18px; }
    
    #cont_pc .cards .card_li>li h4{width:22%; font-size:18px; border-right:1px solid #000; box-sizing: border-box;margin-right:3%;}
    #cont_pc .cards .card_li>li .info{width:75%; }
    #cont_pc .cards .card_li>li .info li{list-style-type: disc; line-height: 26px; margin-left:30px}
    
    #cont_pc .card_1 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_1.png);}
    #cont_pc .card_2 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_2.png);}
    #cont_pc .card_3 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_3.png);}
    #cont_pc .card_4 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_4.png);}
    #cont_pc .card_5 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_5.png);}
    #cont_pc .card_6 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_6.png);}
    #cont_pc .card_7 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_7.png);}
    #cont_pc .card_8 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_8.png);}
    #cont_pc .card_9 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_9.png);}
    #cont_pc .card_10 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_10.png);}
    }
    





/*------------------- mobile ------------------------------------------------*/

@media (min-width:320px) and (max-width:767px){

    #cont_pc{width:100%}

    .title_group{width:calc(100% - 40px); padding:54px 0 60px; border-bottom:1px solid #2BA439; margin:0 auto 70px}
    .title_group .title_bar{width:25px; height:4px; background-color: #2BA439; margin:0 auto; ;}
    .title_group h2{font-size:15px; line-height: 30px; margin:0 auto 12px; text-align: center; color:#2BA439; font-weight:700}
    .title_group h1{font-size:30px; text-align: center;  color:#2BA439; font-weight:800}
    
    
    .cards{width:calc(100% - 40px); margin:0 auto; box-sizing: border-box; padding:30px 25px; border:1px solid #2BA439; border-radius: 15px; margin-bottom:35px}
    
    #cont_pc .cards h3{font-size:22px; border-left:5px solid #2BA439; padding-left:16px; margin-bottom:22px}
    #cont_pc .cards .explain{width:100%; margin:0 auto 35px; text-align: justify; font-size:19px;}
    #cont_pc .cards .card_img{width:100%; height:300px; background-color: #ddd; margin:0 auto 40px; background-size:cover}
    #cont_pc .cards .card_li{width:100%; display: flex; flex-direction: column; justify-content: space-between; gap:16px}
    #cont_pc .cards .card_li>li{width:100%; display: flex; flex-flow: row wrap; justify-content: space;  font-size:16px; }
    
    #cont_pc .cards .card_li>li h4{width:22%; font-size:16px;  box-sizing: border-box;margin-right:3%;}
    #cont_pc .cards .card_li>li .info{width:75%; }
    #cont_pc .cards .card_li>li .info li{list-style-type: disc; line-height: 26px; margin-left:30px}
    
    #cont_pc .card_1 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_1.png);}
    #cont_pc .card_2 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_2.png);}
    #cont_pc .card_3 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_3.png);}
    #cont_pc .card_4 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_4.png);}
    #cont_pc .card_5 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_5.png);}
    #cont_pc .card_6 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_6.png);}
    #cont_pc .card_7 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_7.png);}
    #cont_pc .card_8 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_8.png);}
    #cont_pc .card_9 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_9.png);}
    #cont_pc .card_10 .card_img{background-image: url(../../../img/ksea2024/business/hazardzone_10.png);}


    #cont_pc .cards .card_li .longinfo h4{width:100%; margin-bottom:5px}
    #cont_pc .cards .card_li .longinfo .info{width:100%; padding-left:10px}


    }
    
    




