
/* 인천 기업멘토링 상세페이지 css */
/* ---------------- 공통css ------------------ */
*{font-family: "Noto Sans KR", sans-serif;}

html {height: auto;}
.ichKment_main img{width: 100%; object-fit: cover;}
.ichKment_main section:not(.secBan){width: 100%; height: auto;}
section:not(:first-child){padding : 70px 0;}
a{color: inherit; text-decoration: unset;}
li, ol, ul{color: inherit; text-decoration: unset;}

.odometer.odometer-auto-theme,
.odometer.odometer-theme-default{font-family: 'Noto Sans KR' !important;     line-height: inherit !important;}

.comFlex{display: flex;}
.comFlex--jcSpBtw{justify-content: space-between;}
.comFlex--alItCt{align-items: center;}
.inFlexB{
  display: flex; flex-direction: column; gap: 50px;
  justify-content: space-between;
  width: 100%; margin: 50px auto 50px;
}
.inFlexB_w3Tc{ width: 100%; text-align: center;}
.control_wrap{display: flex; align-items: center; position: absolute;}
.btn_group{display: flex; justify-content: space-between; align-items: center;}
.swiper-button-prev:after,
.swiper-button-next:after { display: none;}

/* sec2, sec6  공통 css */
.sec2 .btn_group, .sec6 .btn_group{width: 55px; height: 17px; position: relative;}
.sec2 .sliBtn, .sec6 .sliBtn{width: 9px; height:17px;}
.sec2 .swiper-button-next, .sec6 .swiper-button-next{
  background: url(/assets/_img/sub/curriculum/inchKment/main_arrow_r.png) no-repeat center center;
  right: 0; top: 23px;
  background-size: cover;
}
.sec2 .swiper-button-prev, .sec6 .swiper-button-prev{
  background: url(/assets/_img/sub/curriculum/inchKment/main_arrow_l.png) no-repeat center center;
  left: 0; top: 23px;
  background-size: cover;
}
.sec2 .swiper-button-next:after, .sec6 .swiper-button-next:after{
  content: '';
  position: absolute; left: -19px; top: 0;
  display: block; width: 2px; height: 17px;
  background: #ddd;
}
.sec2 .control_wrap .swiper-pagination,
.sec6 .control_wrap .swiper-pagination{
  width: calc(100% - 85px);
  height: 2px; background: #ddd;
  right: 0; top: 50%; left: auto;
}
.sec2 .swiper-pagination-progressbar-fill,
.sec6 .swiper-pagination-progressbar-fill{background-color: #9a9a9a !important;}
/* ---- */


.comtWrap{width: 95%; max-width: 1324px; margin: 0 auto;}
.comTitBox{text-align: center;}
.comTitBox-left{text-align: left !important;}
.comTitBox-left .comTit_h1:before{left: 0; transform:unset;}
.comTit_h1{
  color: #000;
  font-size: 24px; font-weight: 600; line-height: 32px;
  word-break:keep-all; padding-top: 20px; position: relative;
}
.comTit_h1:before{
  content: '';
  position: absolute; left: 50%; transform: translateX(-50%); top: 0px;
  display: block; width: 34px; height: 2px; background: #000;
}
.comTit_p{
  font-size: 17px; font-weight: 500; line-height: 24px;
  margin-top: 15px; word-break: keep-all;
}
.sliTxtBox_h1{font-size: 16px; font-weight: 500; line-height: 24px;}
.sliTxtBox_p{font-size: 14px; line-height: 20px;}

/* ------------------------ */

/* ----------------- secBan ------------------- */
.secBan{width: 100%; height: 75vh; overflow: hidden; position: relative;}
.main_title {position: absolute; left: 10%; top: 12%; z-index: 5;}
.main_title img{width: 65%;}
.secBan_video{position:relative; width: 100%;}
.secBan_video video{height: 100%;}
.secBan_video::after{
  content: ''; position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background-color:  rgba(0, 0, 0, .4);
}
.scrollBox{position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10;}
.scroll_arrow{
  position: absolute; top: 50%; left: -11px; transform: translate(-50%, -50%);
}
.scroll_arrow span{
  display: block; width: 8px; height: 8px;
  border-bottom: 1px solid white; border-right: 1px solid white;
  transform: rotate(45deg); margin: -10px;
  animation: arrowMove 2s infinite;
}
.scroll_arrow span:nth-child(2){animation-delay: -0.2s;}
.scroll_arrow span:nth-child(3){animation-delay: -0.4s;}
.scroll_txt{ color: #fff; font-size: 13px; writing-mode: tb;}
@keyframes arrowMove{
	0%{opacity: 0; transform: rotate(45deg) translate(-20px, -20px);}
	50%{opacity: 1;}
	100%{opacity: 0; transform: rotate(45deg) translate(20px, 20px);}
}
/* ------------------------ */

/* ----------------- sec1 ------------------- */
.sec1{
  background: url(/assets/_img/sub/curriculum/inchKment/sec01_bg.webp) no-repeat top center; background-size: cover;
}
.accomp{color: #000;}
.accomp_txt{font-size: 15px; font-weight: 500; margin-bottom: 8px; line-height: 20px;}
.accomp_mainTxt{
  font-size: 28px; font-weight: 600; line-height: 50px; height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.accomp_mainTxt:before{
  content: '';
  position: absolute; bottom: -2px; left: 0.5px;
  display: block; width: 50%; height: 2px;
  background: #82bf24;
}
.accomp_mainTxt:after{
  content: '';
  position: absolute; bottom: -2px; right: 0.5px;
  display: block; width: 50%; height: 2px;
  background: #0092dc;
}
.accoBottTxt{
  font-size: 14px; font-weight: 500; text-align: center;
  line-height: 20px; word-break: keep-all; color: #585858; 
}
.accompArrow{width: 13.1px; margin-left: 5px; margin-bottom: 1.5px;}
/* ------------------------ */

/* ----------------- sec2 ------------------- */
.sec2{
  position: relative;
  background-color: #f6f6f6; box-sizing: border-box;
  padding-bottom: 120px !important; 
}
.sec2:before{
  content: ''; 
  position: absolute; top: -25px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  display: block; width: 40px; height: 40px;
  background: #fff; background-image: linear-gradient(315deg, #fff 28px, transparent 28px);
}
.sec2 .comFlex{flex-direction: column;}
.sec2 .comTitBox{width: 95%; margin: 0 auto; box-sizing: border-box;}
.sec2 .comTit_p{color:#585858;}
.sec2Sli{
  width: 100%;
  margin-top: 40px; padding-top: 40px !important; padding-left: 15px;
}
.sec2 .swiper-slide:nth-child(2n){top:-40px;}
.sliTxtBox--sec2{margin-top: 15px;}
.sec2 .sliTxtBox_h1{margin-bottom: 6px;}
.sec2 .control_wrap{
  width: 95%; bottom: 40px; left: 50%;
  transform: translateX(-50%);
}
/* ------------------------ */

/* ----------------- sec3 ------------------- */
.sec3{background-color: #000; position: relative;}
.sec3:before{
  content: '';
  position: absolute; top: -25px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  display: block; width: 40px; height: 40px;
  background: #f6f6f6;
  background-image: linear-gradient(315deg, #f6f6f6 28px, transparent 28px);
}
.sec3 .inFlexB{margin-bottom: unset; align-items: end;}
.sec3 .comTit_h1:before{background:#fff;}
.sec3 .comTit_h1{color: #fff; font-weight: 600; line-height: normal;}
.sec3 .comTit_p{color:#868686;}
.corpor{ color: #ffff; word-break: keep-all; height: fit-content;}
.corporImg{ margin:0 auto;}
.corpor:nth-child(1n) .corporImg{width: 43px;}
.corpor:nth-child(2n) .corporImg{width: 47px; padding-left: 7px;}
.corpor:nth-child(3n) .corporImg{width: 47px;}
.corpor_h1{
  color: #fff; font-weight: 500; font-size: 18px;
  position: relative; margin-top: 18px;
}
.corpor_p{
  color: #fff; font-weight: 500;
  font-size: 14px; text-align: center;
  margin-top: 12px; line-height: 22px;
}
/* ------------------------ */

/* ----------------- sec4 ------------------- */
.sec4{
  background: url(/assets/_img/sub/curriculum/inchKment/sec04_bg.webp) no-repeat center center; background-size: cover; box-sizing: border-box;
}
.sec4 .comTit_h1:before{background:#fff;}
.sec4 .comTit_h1{color: #fff; font-weight: 500; line-height: normal;
}
.sec4 .comTit_p{color:#868686;}
.sec4SliBox{position: relative;}
.sec4SliBox:before{
  content: '';
  display: block;
  width: 100vw; height: 1px;
  position: absolute; left: 0; top: 55px; left: 0px !important;
  background: #3c3c3d;
}
.sec4Sli{margin-top: 70px; padding-left: 15px; position:relative;}
.sec4Sli_step{display: flex; align-items: center; margin-bottom: 70px; position: relative;}
.sec4Sli_step span{position: absolute; top:45px; left: 0; width: 20px; height: 20px;}
.sec4Sli_step span:after{
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 9px; height: 9px;
  background-color: #fff; border-radius: 50%;
}
.sec4Sli_step span::before{
  content: '';
  position: absolute; top:0; left: 0;
  width: 18px; height: 18px;
  border: 1px solid #fff; border-radius: 50%;
}
.sec4Sli_step h2{
  font-size: 14px; font-weight: 500;
  padding: 3px 6px 3px 6px;
  background: #fff; color: #000;
  display: inline-block;
}
.sec4Sli_step p{ color: #fff; font-size: 16px; margin-left: 10px;}
.sliTxtBox--sec4{margin-left: 10px; margin-top: 20px;}
.sliTxtBox--sec4 li{
  color: #fff; font-size:14px; line-height: 1.8;
  padding-left: 20px; position: relative;
}
.sliTxtBox--sec4 li:after{
  content: '';
  display: block;
  position: absolute; left: 0px; top: 7px;
  width: 12px; height: 13px;
  background: url(/assets/_img/sub/curriculum/inchKment/check_icon.png) no-repeat center center;
}
.sec4 .btn_group{
  width: 95%; height: 40px;
  position: absolute; top: 52%; left: 50%; z-index: 10;
  transform: translate(-50%, -50%);
}
.sec4 .swiper-button-prev {
  background: url(/assets/_img/sub/curriculum/inchKment/step_arrow_l.png) no-repeat center center;
  background-size: contain;
  right: 0; top: 0;
  margin-top:unset;
}
.sec4 .swiper-button-next {
  background: url(/assets/_img/sub/curriculum/inchKment/step_arrow_l.png) no-repeat center center;
  background-size: contain;
  right: 0; top: 0; transform: rotate(180deg);
  margin-top:unset;
}
.sec4 .sliBtn{width: 40px; height:40px;}
/* ------------------------ */

/* ----------------- sec5 ------------------- */
.sec5{
  background: url(/assets/_img/sub/curriculum/inchKment/sec05_bg.webp) no-repeat center center; background-size: cover;
}
.sec5 .comTit_p{color:#000;}
.sec5Sli{margin-top:50px;}
.sec5Sli_slideBox{
  cursor:pointer; 
  border:1px solid #000; background:rgba(46,46,46,0.4); color:#fff; padding:15px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between;
}
.sec5Sli_slideBox a{height: 150px; display: flex; flex-direction: column; justify-content: space-between;}
.sec5Sli_slideBox h1{
  font-size:15px; font-weight:500; word-break:keep-all; 
  width:100%; line-height: 1.3;
  overflow:hidden; text-overflow: ellipsis; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; 
}
.sec5Sli_slideBox .sliBottBox {display: flex; flex-direction: column; justify-content: space-between; height: 90px;}
.sec5Sli_slideBox .sliBottBox p{
  font-size:14px; line-height:1.3; word-break:keep-all;
  overflow:hidden; text-overflow: ellipsis; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 
}
.sec5Sli_slideBox .sliBottBox .sliBottTxt{
  display:flex; align-items:center; justify-content:space-between; font-size:14px;
}
/* ------------------------ */

/* ----------------- sec6 ------------------- */
.sec6{
  position: relative; box-sizing: border-box;
  padding-bottom: 80px !important; margin-bottom: 150px;
}
.sec6 .comTitBox.comFlex{flex-direction: column; gap: 10px;}
.sec6Sli{
  width:100%; margin-top: 40px;
  padding-top: 40px !important; padding-left: 15px;
}
.sec6 .swiper-slide:nth-child(2n){top:-40px;}
.sec6 .control_wrap{
  width: 95%; max-width: 1324px;
  left: 50%; bottom: 0px; transform: translateX(-50%);
}
.sec6 .comTit_h1{ line-height: normal;}
.sec6 .portTab{display: flex; align-items: center; gap:10px;}
.sec6 .portTab p.active{ background:#f6f6f6;}
.sec6 .portTab p.active span{
  font-weight:500; 
  background: linear-gradient(to right, #2398f1, #3fc0d2);
  color: transparent;
  -webkit-background-clip: text; background-clip: text;
}
.sec6 .portTab p{
  width: 54px; height: 30px;
  text-align: center; color:#353535;
  font-size:16px; font-weight:500; line-height: 30px;
  background:transparent; cursor:pointer; transition:0.3s;
}
.sec6 .portMore{font-size: 16px; font-weight: 500; color: #000; margin-top: 24px;}
.sliTxtBox--sec6{margin-top: 20px;}


@media all and (min-width:480px){
  /* --------- secBan --------- */
  .secBan{height: 80vh;}
}

@media all and (min-width:768px){
  .odometer.odometer-auto-theme,
  .odometer.odometer-theme-default{margin-top: 2px;}
  /* ---------- 공통 ---------- */
  .comTit_h1{font-size: 26px; line-height: 36px;}
  .inFlexB { margin: 60px auto 60px;}
  /* ------------------------ */

  /* --------- secBan --------- */
  .secBan{height: 90vh;}
  .main_title img{width: 72%;}
  /* ------------------------ */

  /* --------- sec1 --------- */
  .accomp_mainTxt{font-size: 32px; height: 62px; line-height: 62px;}
  .accompArrow{width: 14px;}
  .accoBottTxt{font-size: 15px; line-height: 22px;}
  /* ------------------------ */

  /* --------- sec3 --------- */
  .corpor{padding: 0 12px;}
  .corpor:first-child .corpor_h1{margin-top:16px;}
  .corpor:nth-child(1n) .corporImg{width: 41px;}
  .corpor:nth-child(2n) .corporImg{width: 45px;}
  .corpor:nth-child(3n) .corporImg{width: 43px;}
  /* ------------------------ */

  /* --------- sec5 --------- */
  .sec5Sli_slideBox a{height: 170px;}
  .sec5Sli_slideBox .sliBottBox{height: 100px;}
  /* ------------------------ */
}
    
@media all and (min-width:960px){
  .odometer.odometer-auto-theme,
  .odometer.odometer-theme-default{margin-top: 3px;}
  /* ---------- 공통 ---------- */
  section:not(:first-child){padding: 90px 0;}
  .comTit_h1{font-size: 30px; line-height: 40px;}
  .comTit_p{font-size: 18px; line-height: 26px; margin-top: 20px;}
  .inFlexB{width: 90%; flex-direction: row; gap: unset; margin: 70px auto 70px;}
  .inFlexB_w3Tc{width: calc( 100% / 3);}
  /* ------------------------ */

  /* --------- secBan --------- */
  .main_title img{width: 78%;}
  /* ------------------------ */

  /* --------- sec1 --------- */
  .accomp_mainTxt{font-size: 35px; height: 65px; line-height: 65px;}
  .accomp_txt {font-size: 18px; line-height: 24px;}
  .accompArrow{width: 16px;}
  .accoBottTxt{font-size: 16px; line-height: 24px;}
  /* ------------------------ */

  /* --------- sec2 --------- */
  .sec2Sli{margin-top: 60px;}
  /* ------------------------ */

  /* --------- sec3 --------- */
  .corpor:first-child .corpor_h1{margin-top:15px;}
  /* ------------------------ */

  /* --------- sec4 --------- */
  .sec4 .sliBtn{width: 50px; height: 50px;}
  .sec4 .btn_group{height: 50px; top: 50%;}
  /* ------------------------ */

  /* --------- sec5 --------- */
  .sec5Sli{margin-top: 70px;}
  .sec5Sli_slideBox h1{-webkit-line-clamp: 2;}
  .sec5Sli_slideBox .sliBottBox{height:90px;}
  /* ------------------------ */
}
    

@media all and (min-width:1300px){
  /* --------- 공통css --------- */
  section:not(:first-child){padding : 100px 0;}
  .inFlexB{ margin: 90px auto 100px;}
  /* sec2, sec6  공통 css */
  .sec2 .sliBtn, .sec6 .sliBtn{width: 13px; height:23px;}
  .sec2 .btn_group, .sec6 .btn_group{width: 60px; height: 23px;}
  .sec2 .swiper-button-next:after,
  .sec6 .swiper-button-next:after{height: 23px; left: -17px;}
  .sec2 .swiper-pagination,
  .sec6 .swiper-pagination{width: calc(100% - 100px);}
  /* --- */

  .comtWrap{ width: 85%;}
  .comTit_h1{font-size: 32px; line-height: 42px; padding-top: 28px;}
  .sliTxtBox_h1{font-size: 18px; line-height: 28px;}
  .sliTxtBox_p{font-size: 15px; line-height: 22px;}
  /* ------------------------ */

  /* --------- secBan --------- */
  .secBan {height: calc(90vh - 162px);}
  .main_title {left: 11%; top: 16%; bottom: unset;}
  .main_title img{width: 90%;}
  .secBan_video video{width: 100%;}
  .scrollBox{bottom: 40px;}
  .scroll_arrow span{
    width: 10px; height: 10px;
    border-bottom: 2px solid white; border-right: 2px solid white;
  }
  .scroll_txt{ font-size: 15px;}
  /* ------------------------ */

  /* --------- sec2 --------- */
  .sec1{background-size: contain;}
  .accomp_mainTxt{font-size: 42px; font-weight: 800;}
  .accoBottTxt{font-size: 20px; line-height: 30px;}
  .accompArrow{width:20px;}
  /* ------------------------ */

  /* --------- sec2 --------- */
  .sec2:before{width: 50px; height: 50px; background-image: linear-gradient(315deg, #fff 38px, transparent 38px);}
  .comtWrap-sec2{
    --sec2Mar: calc(calc(100vw - 85% - 150px) / 2);
    width: calc(100% - var(--sec2Mar));
    margin: unset;
    margin-left: var(--sec2Mar);
  }
  .sec2 .comFlex{flex-direction: row;}
  .sec2 .comTitBox{width: 30%; padding-right: 30px; margin: unset;}
  .sec2Sli{width: 70%; padding-left: 0; margin-top: 0;}
  .sec2 .swiper-slide:nth-child(2n) {top:-40px;}
  .sec2 .control_wrap{
    width: calc(70% - 150px); margin-left: var(--sec2Mar);
    left: 30%; bottom: 45px; transform: translateX(-30px);
  }
  /* ------------------------ */

  /* --------- sec3 --------- */
  .sec3:before{width: 50px;height: 50px; background-image: linear-gradient(315deg, #f6f6f6 38px, transparent 38px);}
  .corporBox{margin: 90px auto 0;}
  .corporImg{width: fit-content !important;}
  .corpor_h1{font-size: 20px; margin-top: 24px;}
  .corpor:first-child .corpor_h1{margin-top:24px;}
  .corpor_p{font-size: 15px;}
  /* ------------------------ */

  /* --------- sec4 --------- */
  .sec4 .comTit_h1{font-weight: 600;}
  .sec4SliBox:before{top: 65px;}
  .sec4Sli_step{margin-bottom: 80px;}
  .sec4Sli_step span{top:55px;}
  .sec4Sli_step h2{font-size: 18px; padding: 3px 8px 3px 8px;}
  .sec4Sli_step p{font-size: 20px;}
  .sliTxtBox--sec4 li{font-size:16px; padding-left: 26px;}
  .sliTxtBox--sec4 li:after{width: 14px; height: 15px;}
  /* ------------------------ */

  /* --------- sec5 --------- */
  .sec5Sli{margin-top:90px;}
  .sec5Sli_slideBox{padding:20px;}
  .sec5Sli_slideBox a{height: 180px;}
  .sec5Sli_slideBox h1{font-size:17px; line-height: 1.4;}
  .sec5Sli_slideBox .sliBottBox{height: 100px;}
  .sec5Sli_slideBox .sliBottBox p{font-size:15px; line-height: 1.4;}
  .sec5Sli_slideBox .sliBottBox .sliBottTxt{font-size:15px;}
  /* ------------------------ */

  /* --------- sec6 --------- */
  .sec6 .comTitBox.comFlex{flex-direction: row; align-items: center; gap: 0;}
  .sec6 .portTab{ margin-left: 50px;}
  .sec6 .portTab p.active span{font-weight:700;}
  .sec6 .portTab p{width: 55px; height: 42px; line-height: 42px;  font-size:18px;}
  .sec6 .portMore{font-size: 18px; font-weight: 600; margin-top: 34px;}
  .sec6 .control_wrap{width: 85%;}
}


@media all and (min-width:1440px){
  /* --------- 공통css --------- */
  .comTit_h1{font-size: 38px;line-height: 52px;}
  .comTit_p{font-size: 20px; line-height: 30px; margin-top: 28px;}
  .sliTxtBox_h1{font-size: 20px; line-height: 35px;}
  .sliTxtBox_p{font-size: 16px; line-height: 24px;}
  /* ------------------------ */

  /* --------- secBan --------- */
  .secBan { height: auto; max-height: calc(100vh - 162px); }
  /* ------------------------ */

  /* --------- sec2 --------- */
  .sec2 .comTitBox{width: 360px;}
  .sec2Sli{width: calc(100% - 360px);}
  .sliTxtBox--sec2{margin-top: 20px;}
  .sec2 .control_wrap{transform: unset; left: 360px; width: calc(calc(100% - 360px) - 15%);} 
  /* ------------------------ */

  /* --------- sec3 --------- */
  .corpor_p{font-size: 16px; margin-top: 15px; line-height: 25px;}
  /* ------------------------ */

  /* --------- sec4 --------- */
  .sec4Sli{
    --sec4Mar: calc(calc(100vw - 85% - 150px) / 2);
    width: calc(100% - var(--sec4Mar));
    padding-left: 0; margin-top: 70px; 
    margin-left: var(--sec4Mar);
  }
  .sliTxtBox--sec4 li{font-size: 18px;}
  .sliTxtBox--sec4 li:after{top: 10px;}
  .sec4 .btn_group{height: 60px; top: 48%;}
  .sec4 .btn_group .swiper-button-prev {background-size: contain;}
  .sec4 .btn_group .swiper-button-next {background-size: contain;}
  .sec4 .sliBtn{width: 60px; height:60px;}
  /* ------------------------ */

  /* --------- sec6 --------- */
  .sec6Sli{
    --sec6Mar: calc(calc(100vw - 85% - 150px) / 2);
    width: calc(100% - var(--sec6Mar));
    padding-left: 0; margin-top: 50px;
    margin-left: var(--sec6Mar);
  }
  /* ------------------------ */
}

@media all and (min-width:1600px){
  /* --------- sec2 --------- */
  .sec2 .comTitBox{padding-right:0; width: 420px;}
  .sec2Sli{width:calc(100% - 420px);}
  .sec2 .control_wrap{ left: 420px; width: calc(calc(100% - 420px) - 18%);}
  /* ------------------------ */

  /* --------- sec4 --------- */
  .sec4 .btn_group{width: calc(100% - 220px);  top: 46%;}
  /* ------------------------ */
}

@media all and (min-width:1622px){
  .comtWrap-sec2{--sec2Mar: calc(calc(100vw - 1324px - 150px) / 2);}
  .sec4Sli{--sec4Mar: calc(calc(100vw - 1324px - 150px) / 2);}
  .sec6Sli{--sec6Mar: calc(calc(100vw - 1324px - 150px) / 2);}
}
