#subVisual {position: relative; width:100%; height:430px; background-size: cover;}
#subVisual .sub-visual-txt-con { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding-top: 80px; }
#subVisual .sub-visual-txt-con h2 {color:#fff; font-size:42px; font-weight:600;}
#subVisual ul { display: flex; gap: 20px; position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); }
#subVisual ul li { line-height: 30px; transition: all .3s; }
#subVisual ul li:hover { border-bottom: 2px solid #fff; }
#subVisual ul li.on { border-bottom: 2px solid #fff; }
#subVisual ul li a { color: #fff; }

@media screen and (max-width:650px) {
  #subVisual {height:300px; background-size:cover;}
  #subVisual ul { justify-content: center; bottom: 30px; width: 100%; }
}
@media screen and (max-width: 412px) {
  #subVisual ul li a { font-size: 13px; }
  #subVisual .sub-visual-txt-con h2 { font-size: 30px; }
}

.sub-visual01 { background: url(../img/sub-visual01.png) no-repeat center center; }
.sub-visual02 { background: url(../img/sub-visual02.png) no-repeat center center; }
.sub-visual03 { background: url(../img/sub-visual03.png) no-repeat center center; }
.sub-visual04 { background: url(../img/sub-visual04.png) no-repeat center center; }


#subContent
{padding:100px 0px;}
.sub-title 
{text-align:center; margin-bottom:115px;}
.sub-title h2 
{font-size:36px; font-weight:700; color:#222; display:inline-block; position:relative; padding-bottom:20px;}
.sub-title h2:before 
{content:''; position:absolute; width:8px; height:8px; background:#333; border-radius:50%; bottom:-20px; left:50%; transform:translate(-50%);}
.sub-title h2:after 
{content:''; position:absolute; width:8px; height:8px; background:#2c33bc; border-radius:50%; bottom:-35px; left:50%; transform:translate(-50%);}
@media screen and (max-width:650px) {
    .sub-title h2 
    {font-size:32px;}
}


/* sub contents */
.sub-inner { max-width: 1400px; margin: 0 auto; }
.subAreaBg { background-color: #f2f2f2; }
.sub-tit { display: flex; justify-content: center; margin-bottom: 40px; }

/* info */
.sub-info-wrap ul {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #f2f2f2;
}
.sub-info-wrap ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 50%;
  height: 50px;
}
.sub-info-wrap ul li em {
  font-weight: 700;
}
.sub-info-wrap ul li:first-child {
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 600px) {
  .sub-info-wrap ul { flex-direction: column; }
  .sub-info-wrap ul li { width: 100%; }
  .sub-info-wrap ul li:first-child { border-right: none; border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
}

/* introduce */
.introduce-wrap {
  display: flex;
  align-items: center;
  gap: 50px;
}
.introduce-wrap .introduce-txt-wrap em { 
  display: block;
  margin-bottom: 50px;
  font-size: 23px;
  line-height: 40px;
  font-weight: 700;
 }
.introduce-wrap .introduce-txt-wrap p {
  font-size: 18px;
  line-height: 30px;
}

/* products */

.sub-prod-img { display: block; margin: 0 auto; }
.subArea { padding: 100px 0; }
.subProducts .sub-tit { margin-bottom: 80px; }
.subArea .sub-tit p { display: inline-block; margin: 0 auto; padding: 10px 150px; border-radius: 20px; font-size: 23px; color: #fff; background-color: #2c33bc; }

.sub-txt .container { padding: 0; }
.sub-txt ul { display: flex; justify-content: center; align-items: center; gap: 30px; }
.sub-txt ul li { position: relative; padding: 60px 60px 60px; border-radius: 20px; border: 1px solid #cecece; background-color: #fff; }
.sub-txt ul li p { font-size: 18px; line-height: 27px; font-weight: 600; text-align: center; }
.sub-prod-txt > li span { display: block; margin: 10px 0; }
.sub-txt-img-wrap { overflow: hidden; padding: 0 !important; }
.sub-txt ul li img { width: 100%; height: 100%; object-fit: cover; scale: 1.04; }

.sub-txt ul li .sub-prod-icon { display: inline-block; position: absolute; left: 50%; top: -40px; padding: 10px; transform: translate(-50%, 0); background-color: #fff; }
.sub-txt ul li .sub-prod-icon::after { content: ""; position: absolute; transform: translate(-31px, 28px); display: inline-block; width: 30px; height: 30px; border-radius: 100%; background-color: rgba(44, 51, 188, 0.3); }

.sub-txt2 ul li .sub-prod-icon::after { display: none; }
.sub-txt2 ul li .sub-prod-icon { top: -23px; width: 45px; height: 45px; padding: 0; border-radius: 100%; background-color: #2c33bc; }
.sub-txt2 ul li .sub-prod-icon em { display: block; text-align: center; line-height: 45px; color: #fff; }


@media screen and (max-width: 1200px) {
  .subArea { padding: 80px 10px; }
  .sub-txt ul { flex-wrap: wrap; }
  .sub-txt ul li { width: 48%; }
  .sub-prod-img {  
    width: 100%;
  }
}

@media screen and (max-width: 770px) {
  .sub-title { margin-bottom: 55px; }
  .subArea { padding: 60px 10px; }
  .subProducts .sub-tit { margin-bottom: 60px; }
  .sub-txt ul li { width: 100%; padding: 40px 30px 30px; }
  .sub-txt-img-wrap { width: 70% !important; }
  .sub-txt ul li p { font-size: 16px; }
  .subArea .sub-tit p { display: block; width: 100%; padding: 10px 0; text-align: center; font-size: 18px; }
  .sub-txt ul li .sub-prod-icon { width: 60px; top: -25px; }
  .sub-txt ul li .sub-prod-icon::after { transform: translate(-23px, 20px); width: 20px; height: 20px; }
}

@media screen and (max-width: 630px) {
  .sub-txt ul li .sub-prod-icon { width: 45px; }
}

@media screen and (max-width: 412px) {
  .subArea .sub-tit p { font-size: 15px; }
  #subVisual ul { gap: 10px; }
}

/* 동영상 */
.prod-video-wrap {
  display: flex;
  justify-content: center;
  gap: 30px;
}
.prod-video-wrap video {
  width: 30%;
}

@media screen and (max-width: 630px) {
  .prod-video-wrap { flex-direction: column; gap: 10px; }
  .prod-video-wrap video { width: 100%; }
}

/* 문의하기 */
.customer-wrap {
  display: flex;
  justify-content: center;
}
.customer-wrap .customer-map {
  width: 49%;
}
.customer-wrap .customer-txt {
  padding: 50px;
  background-color: #333;
  color: #fff;
}
.customer-wrap .customer-txt p {
  margin-bottom: 55px;
  font-size: 23px;
  line-height: 30px;
}
.customer-txt-icon-wrap {
  margin-bottom: 15px;
}
.customer-txt-icon-wrap i {
  margin-right: 10px;
  font-size: 18px;
}
.customer-txt-icon-wrap em {
  font-size: 18px;
}
.customer-txt ul li + li {
  margin-top: 30px;
}
.customer-txt ul li a {
  color: #fff;
}


/* mail */
/**************************************
    폼메일 스타일 01 :: 일반 폼메일 전용
***************************************/
/* 폼메일 영역 설정 공통 */
.form-area
{max-width:800px; margin:0 auto;}
.form-area tr, .form-area td, .form-area th
{font-family:'pretendard';}


/* STYLE 01 - 일반 폼메일 */
#cm_formmail_style_01 .form-wrap table
{width:100%; border-collapse: collapse; background:transparent}
#cm_formmail_style_01 .form-wrap table .formmail tr
{border-bottom:1px solid #ddd;}
#cm_formmail_style_01 .form-wrap .formmail td.formmail_title_bgcolor
{font-family:'pretendard', 'nanumsquare'; padding:20px 0; font-size:15px; font-weight:600; color:#222;}
#cm_formmail_style_01 .form-wrap .formmail td.formmail_cell_bgcolor
{padding:5px;}
#cm_formmail_style_01 .form-wrap .formmail td.formmail_cell_bgcolor input,
#cm_formmail_style_01 .form-wrap .formmail td.formmail_cell_bgcolor textarea
{width:95%; border:1px solid #ddd; padding:10px; font-family:'pretendard', 'nanumsqure'}
/* 연락처 */
#cm_formmail_style_01 .form-wrap .formmail td.formmail_cell_bgcolor input[name='phone_no1'],
#cm_formmail_style_01 .form-wrap .formmail td.formmail_cell_bgcolor input[name='phone_no2'],
#cm_formmail_style_01 .form-wrap .formmail td.formmail_cell_bgcolor input[name='phone_no3'],
#cm_formmail_style_01 .form-wrap .formmail td.formmail_cell_bgcolor input[name='mobile_no1'],
#cm_formmail_style_01 .form-wrap .formmail td.formmail_cell_bgcolor input[name='mobile_no2'],
#cm_formmail_style_01 .form-wrap .formmail td.formmail_cell_bgcolor input[name='mobile_no3']
{width:29%;}

#cm_formmail_style_01 .form-wrap .formmail td.formmail_cell_bgcolor input[type='radio']
{width:auto;}
/* 체크박스 */
#cm_formmail_style_01 .form-wrap .formmail td.formmail_cell_bgcolor input[type='checkbox']
{display:inline-block; width:auto; margin:10px 0 15px;}
/* 파일첨부 */
#cm_formmail_style_01 .form-wrap .formmail td.formmail_cell_bgcolor input[type='file']
{border:none;}
/* 하단 버튼 (HTML 태그에 form-btn class 추가 후 수정) */
#cm_formmail_style_01 .form-wrap .form-btn ul li
{display:inline-block; width:200px; margin:0 10px;;}
#cm_formmail_style_01 .form-wrap .form-btn ul li a
{padding:15px 0; display:block; background:#ddd; font-size:15px; color:#222; }
#cm_formmail_style_01 .form-wrap .form-btn ul li:nth-child(1) a
{ background:#333; color:#fff;}
#cm_formmail_style_01 .form-wrap .form-btn ul li a:hover
{opacity:.8}