/* BASIC css start */
/* ÆùÆ® */
@font-face {
  font-family: 'pop_l';
  src: url("/design/jsnlab/img/common/Poppins-Light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* ÆùÆ® */
@font-face {
  font-family: 'pop_m';
  src: url("/design/jsnlab/img/common/Poppins-Medium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}






.pro1 { width: 100%; height: auto; margin: 90px auto; position: relative; }

.pro1_top_con { width: 92%; max-width: 1280px; height: auto; margin: 0px auto 70px auto; display: flex; justify-content: space-between; }

/*PRO_SLIDER*/
.pro1_slider { width: 48%; height: auto; }


    .pro1 .swiper { width: 100%; height: 100%; }
    .pro1 .swiper-slide { background: #fff; display: flex;  justify-content: center;  align-items: center;  }
    .pro1 .swiper-slide img { display: block;  width: 100%;  height: 100%; object-fit: cover; }
 
    .pro1 .swiper { width: 100%;  height: 300px; margin-left: auto; margin-right: auto; }
    .pro1 .swiper-slide {  background-size: cover;  background-position: center; }

    .pro1 .pro1sli2 {  height: 80%;  width: 100%; }
    .pro1 .pro1sli { height: 20%;  box-sizing: border-box; padding: 10px 0; }

    .pro1 .pro1sli .swiper-slide {   width: 25%;  height: 100%;  opacity: 0.6; }
    .pro1 .pro1sli .swiper-slide-thumb-active {  opacity: 1; }

    .pro1 .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }



/*PRO_TOP*/
.pro1_text {  width: 48%; height: auto;  color: #000; }
    .pro1_text h3 { font-size: 26px; padding-bottom: 17px; margin-bottom: 20px;  border-bottom: 1px solid #CCCCCC; font-family: 'pop_m';}
    .pro1_text h4 { font-size: 18px;  margin-bottom: 10px; }
    .pro1_text p { font-size: 16px; line-height: 140%; margin-bottom: 20px; font-family: 'pop_l'; }
    .pro1_text h5 { font-size: 16px; line-height: 140%; margin-bottom: 10px; font-family: 'pop_l'; }













/* :::: PRO_3BOX ::: */
.pro1_3box { width: 100%; height: 750px;  background-color: #FAF7F3; }
.p_list_con {  width: 92%; max-width: 1280px;  height: auto;  margin: 0 auto; padding-top: 50px; }


/* Ä«Å×°í¸® */
.p_cont { width: 100%;  height: auto;  }
.p_list { width: 100%; height: auto; display: flex;  }
.p_list .p_li { width: 33.3%;  cursor: pointer;  border-bottom: 1px solid #000; padding-bottom: 15px;
                display: flex;  align-items: center; justify-content: center;
}
.p_li p { font-family: 'pop_l';  font-size: 22px; margin: 10px 0 3px 0;}


/*DESC_BOX*/
.p_contents { width: 100%;  }
.p_con_box { width: 100%; height: auto; margin: 50px auto;  display: flex; justify-content: space-between; }

/*DESC_CON*/
.p_desc {  width: 48.5%; height: auto;  }
.p_desc2 {  width: 48.5%; height: auto;  }
.p_desc_p1 span{ font-family: 'pop_m';  }

/*text*/
.p_desc p, .p_desc2 p { font-size: 16px; line-height: 1.5; font-family: 'pop_l'; }
.p_desc .p_desc_title, .p_desc2 .p_desc_title { font-size: 24px; margin-bottom: 24px; font-family: 'pop_m';}
.p_desc .p_desc_b { font-size: 16px; margin-top: 14px; font-family: 'pop_m';}
/*img*/
.p_desc_img {width: 48.5%; height: auto; }
.p_desc_img img { width: 100%; height: 536px; display: block; border-radius: 20px;}
/*video*/
.p_desc_video { width: 48.5%; height: auto;  border-radius: 20px;  overflow: hidden; }
.p_desc_video video { width: 100%;   height: 536px;  border-radius: 20px; display: block;-o-object-fit: cover;   object-fit: cover;  }


/*º¯°æ»çÇ×*/
.p_active { border-bottom: 5px solid #00654E!important; color: #00654E;}
.p_active p { font-family: 'pop_m'!important; }

.hidden { display: none; }










/* HOW TO USE */
.pro1_sec3 {  width: 92%; max-width: 1280px;  height: auto; margin: 0 auto; }
.pro1_sec3 h3 { font-size: 26px; margin-top: 120px; margin-bottom: 70px; font-family: 'pop_m';}

.pro1_sec3_con { width: 100%;  height: auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.pro1_sec3_box { width: 46.5%; padding: 13px; margin-bottom: 40px; height: auto; display: flex; justify-content: space-between;  box-shadow: 1px 1px 4px rgba(193, 193, 193, 0.6); border-radius: 15px; }

/*img*/
.pro1_sec3_con1_img { width: 35%; height: auto;  }
.pro1_sec3_con1_img img { width: 100%; height: auto; border-radius: 20px; display: block; }

/*text*/
.pro1_sec3_con1_text { width: 60%; display: flex; }
.pro1_sec3_con1_text h4 { font-size: 18px;  margin-right: 9px; font-family: 'pop_m'; }
.pro1_sec3_con1_text p { font-size: 16px; line-height: 1.5;  font-family: 'pop_l';}
.pro1_sec3_con1_text p span{ font-family: 'pop_m';}






/* ANY QUESTIONS */
.pro1_sec4 {  width: 92%; max-width: 1280px;  height: auto; margin: 0 auto; }
.pro1_sec4 h3 { font-size: 26px; margin-top: 120px; margin-bottom: 70px;  font-family: 'pop_m'; }


.pro1_sec4_con { width: 100%;  height: auto; display: flex; justify-content: space-between; }

/*text*/
.pro1_sec4_text {  width: 47%; height: auto; }

.sec4_text_box { width: 100%; height: auto; margin-bottom: 74px; }
.sec4_title { font-size: 22px; margin-bottom: 26px;  padding-bottom: 15px; border-bottom: 1px solid #CCCCCC; font-family: 'pop_m';}
.sec4_desc { font-size: 22px; line-height: 1.5; font-family: 'pop_l'; }
.sec4_desc span { font-family: 'pop_m';  }



/*img*/
.pro1_sec4_img { width: 46%; height: auto; margin: 0 auto; }
.pro1_sec4_img img { width: 100%; height: auto; border-radius: 20px; display: block; margin-top: 40px; }



























/* BASIC css end */