/* BASIC css start */
/* 메인 배너 */
.mainBanner{ visibility: hidden; position:relative;overflow:hidden;}
.mainBanner .main_banner img{width:100%;}
.mainBanner .bx-pager{position:absolute;bottom:20px;left:0;right:0;z-index:60;text-align:center;}
.mainBanner .bx-pager-item{transition:all 0.3s ease;-webkit-transition:all 0.3s ease;display:inline-block;position:relative;}
.mainBanner .bx-pager-link{display:inline-block;width: 16px;height: 6px;font-size:0;margin: 0 3px;background-color: rgba(225,225,225,0.8);border-radius: 3px;}
.mainBanner .bx-pager-link.active{width: 80px;background-color: rgba(45, 45, 45, 0.8);}
.mainBanner .bx-controls-direction {position:absolute;top:50%;z-index:60;text-align:center;/* opacity: 0; */width: 100%;}
.mainBanner:hover .bx-controls-direction {opacity:1.0;transition:all 0.3s ease;-webkit-transition:all 0.3s ease;}
.mainBanner .bx-prev, .mainBanner .bx-next{position:absolute;top:0;margin-top:-25px;font-size: 28px;display:inline-block;width:50px;height:50px;color: #eaeaea;line-height: 45px;}
.mainBanner .bx-prev i, .mainBanner .bx-next i {vertical-align: middle;}
.mainBanner .bx-prev{left: 200px;}
.mainBanner .bx-next{right: 200px;}
.mainBanner .bx-prev:hover,
.mainBanner .bx-next:hover{transition:all 0.3s ease;-webkit-transition:all 0.3s ease;background-color: rgba(90, 90, 90, 0.8);color:#fff;border-radius: 100%;}

/* 메인 서브 배너 */
.subbnArea {position: relative;margin-top: 70px;}
.subbnArea:after { content: ""; display: block; clear: both; }
.subbnArea .sub_banner > li {float: left;width: 470px; padding-right:55px }
.subbnArea .sub_banner > li > img { width: 100%; max-width: 100%;}
.subbnArea .sub_banner li .line {margin-top: 50px;}
.subbnArea .sub_banner li.last {padding-right:0px}



/* OUR BRAND PRODUCT */
.specialItem { margin: 70px auto 90px; position:relative }
.specialItem h3 { padding-bottom:20px; font-size:20px; font-weight:bold; font-family:Arial; text-align:center }
.specialItem .slide dl { position:relative }
.specialItem .slide dt { width:100%; height:100%; cursor:pointer; overflow:hidden }
.specialItem .slide dt img { width:100%; height:100%; transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease }
.specialItem .slide dd { display:none; position:absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(225,225,225,0.8);  overflow:hidden; z-index:2 }
.specialItem .slide dd a { display:block; padding-top:80px; width:100%; color:#fff; text-align:center }
.specialItem .slide dd a .prd-name { display: block; margin:0 10px; padding-bottom:5px; font-size:12px; color:#000; border-bottom:none }
.specialItem .slide dd a .prd-price { display:block; margin:0 10px !important ;padding-top:3px;font-size:14px; font-weight: bold;color:#000;}
.specialItem .slide dd a .prd-price del {color:#000; font-weight: normal; font-size: 12px; margin-right: 5px}
.specialItem .slide dd a .prd-subname{padding: 15px 25px;color:#000;  }
.specialItem .bx-controls { position:absolute; top:90px; left:0; width:100% }
.specialItem .bx-controls a { position:absolute; top:0; font-size:24px }
.specialItem .bx-controls .bx-prev { left:0 }
.specialItem .bx-controls .bx-next { right:0 }


/* 이미지 고정 배너 */
.fixed-img-bannerWrap img{width:100%;}

/* WEEKLY BEST // tabProduct */
#tabProduct {visibility:hidden;position:relative;padding:5% 0;}
#tabProduct .newCate_prod { position:relative }
#tabProduct .newCate_prod .newCateTab {zoom: 1;overflow: hidden;width: 700px;margin: 0 auto 40px;}
#tabProduct .newCate_prod .newCateTab li{float:left;width: 120px;margin: 0 10px;text-align:center;}
#tabProduct .newCate_prod .newCateTab li a {display:block;height: 34px;font-size: 14px;line-height: 34px;color:#777;background: #fff;border-radius: 34px;border: 1px solid #ddd;}
#tabProduct .newCate_prod .newCateTab li a.active {color:#111;font-weight:bold; background:#444; color:#fff; border: 1px solid #444;}
#tabProduct .item-wrap .item-cont .item-list {float: left;  width: 356px; padding: 0 12px 40px 12px;}

/*mainCont*/
#mainContWrap{ background:#eeeeee; width:100%; height:725px} 
#mainContWrap .mainCont{width:1200px; margin:0 auto; padding: 120px 0px;}                
#mainContWrap .mainCont .movieWrap {width:780px; float:left; margin-left:30px}
#mainContWrap .mainCont .movieWrap .load{position:relative; padding-bottom:56.25%; height:0;}
#mainContWrap .mainCont .movieWrap .load iframe{position:absolute; top:0; left:0; width:780px; height:490px}
#mainContWrap .mainCont .textWrap{ float:left; width:380px }
#mainContWrap .mainCont .textWrap h4 {font-size:30px; color:#000; }
#mainContWrap .mainCont .textWrap .bigTit{padding: 10px 0px; display: block; font-size:40px}
#mainContWrap .mainCont .textWrap .bigTit em{font-weight:bold}
#mainContWrap .mainCont .textWrap .shopBtn{margin:30px 0px}
#mainContWrap .mainCont .textWrap .shopBtn a{    border: 1px solid #c7c7c7;   padding: 20px 40px;; }
#mainContWrap .mainCont .textWrap .shopBtn a:hover{background:#fff;border: 1px solid #fff;}


/* 상품 타이틀 */
.h_title {padding: 70px 0 35px;text-align:center;}
.h_title h3 { font-size: 24px; font-weight:bold; color:#292929; }



/* 12. 메인 페이지 - 10월 8일 추가 */
.vc-main .vc-sec { padding: 80px 0; }
.vc-main .vc-gray { background: #F6F8FB; }
.vc-main .vc-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.vc-main .vc-head { margin-bottom: 32px; }
.vc-main .vc-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.vc-main .vc-eyebrow { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #1E5BC6; }
.vc-main .vc-head h3 { margin: 0; font-size: 32px; font-weight: 700; color: #0F1B33; letter-spacing: -0.5px; }
.vc-main .vc-more { font-size: 15px; font-weight: 700; color: #1E5BC6; text-decoration: none; }

.vc-main .vc-cats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.vc-main .vc-cat { display: flex; flex-direction: column; gap: 6px; padding: 24px 20px; border-radius: 20px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.vc-main .vc-cat:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -16px rgba(15,27,51,.35); }
.vc-main .vc-ic { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.vc-main .vc-ic svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vc-main .vc-cat b { font-size: 18px; color: #0F1B33; }
.vc-main .vc-cat span:not(.vc-ic) { font-size: 14px; color: #5B6474; line-height: 1.5; }
.vc-main .vc-cat em { margin-top: auto; padding-top: 10px; font-style: normal; font-size: 14px; font-weight: 700; }
.vc-main .c-commerce { background: #FFEDE4; } .vc-main .c-commerce .vc-ic { background: #F2703C; } .vc-main .c-commerce em { color: #C24D1A; }
.vc-main .c-basic { background: #E7F0FE; } .vc-main .c-basic .vc-ic { background: #3B82F6; } .vc-main .c-basic em { color: #1E5BC6; }
.vc-main .c-cert { background: #E2F6EE; } .vc-main .c-cert .vc-ic { background: #1FAF7A; } .vc-main .c-cert em { color: #0E7A52; }
.vc-main .c-design { background: #F1EBFE; } .vc-main .c-design .vc-ic { background: #8B5CF6; } .vc-main .c-design em { color: #6A3CD6; }
.vc-main .c-ai { background: #FDE8F0; } .vc-main .c-ai .vc-ic { background: #EC5C93; } .vc-main .c-ai em { color: #C2346C; }

.vc-main #newArrivals .item-cont { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 24px !important; margin-bottom: 32px !important; }
.vc-main #newArrivals .item-cont::after { display: none !important; }
.vc-main #newArrivals .item-list, .vc-main #newArrivals .item-list dt, .vc-main #newArrivals .item-list dd, .vc-main #newArrivals .item-list .thumb a { width: auto !important; margin: 0 !important; float: none !important; }
.vc-main #newArrivals .item-list .thumb img { display: block; width: 100% !important; height: auto !important; border-radius: 14px; }
.vc-main #newArrivals .prd-name { margin-top: 12px; font-size: 15px; font-weight: 500; color: #1B2433; line-height: 1.5; }
.vc-main #newArrivals .prd-price { margin-top: 6px; font-size: 15px; font-weight: 700; color: #1E5BC6; }

.vc-main .vc-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.vc-main .vc-steps li { background: #F6F8FB; border-radius: 20px; padding: 28px 24px; }
.vc-main .vc-num { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; background: #1E5BC6; color: #fff; font-weight: 700; align-items: center; justify-content: center; margin-bottom: 14px; }
.vc-main .vc-steps b { display: block; font-size: 18px; color: #0F1B33; margin-bottom: 6px; }
.vc-main .vc-steps p { margin: 0; font-size: 15px; color: #5B6474; line-height: 1.6; }

.vc-main .vc-cta { background: #0F1B33; padding: 56px 0; }
.vc-main .vc-cta .vc-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.vc-main .vc-cta h3 { margin: 0 0 6px; font-size: 28px; font-weight: 700; color: #fff; }
.vc-main .vc-cta p { margin: 0; color: #C9D3E6; font-size: 15px; }
.vc-main .vc-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.vc-main .vc-btn-dark { background: #FFE14D; color: #0F1B33 !important; font-weight: 700; padding: 15px 26px; border-radius: 999px; text-decoration: none; }
.vc-main .vc-btn-line { border: 2px solid #fff; color: #fff !important; font-weight: 700; padding: 13px 24px; border-radius: 999px; text-decoration: none; }

@media (max-width: 1000px) {
  .vc-main .vc-cats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .vc-main #newArrivals .item-cont, .vc-main .vc-steps { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* 12-1. 메인 글자 또렷하게 - 10월 8일 추가 */
.vc-main, .vc-main * {
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif !important;
  letter-spacing: -0.3px !important;
}
.vc-main .vc-eyebrow { font-size: 16px !important; font-weight: 700 !important; }
.vc-main .vc-head h3 { font-size: 34px !important; font-weight: 800 !important; color: #0F1B33 !important; letter-spacing: -1px !important; }
.vc-main .vc-cat b { font-size: 20px !important; font-weight: 700 !important; }
.vc-main .vc-cat span:not(.vc-ic) { font-size: 15px !important; font-weight: 500 !important; color: #4A5568 !important; }
.vc-main .vc-cat em { font-size: 15px !important; font-weight: 700 !important; }
.vc-main .vc-steps b { font-size: 19px !important; font-weight: 700 !important; }
.vc-main .vc-steps p { font-size: 15px !important; font-weight: 500 !important; color: #4A5568 !important; }
.vc-main .vc-num { font-weight: 700 !important; }
.vc-main #newArrivals .prd-name { font-weight: 600 !important; }
.vc-main .vc-cta h3 { font-weight: 800 !important; }
.vc-main .vc-cta p, .vc-main .vc-more, .vc-main .vc-btn-dark, .vc-main .vc-btn-line { font-weight: 600 !important; }

/* 12-2. 메인 과정 목록 크기, 줄 맞춤 - 10월 8일 추가 */
.vc-main #newArrivals .item-list,
.vc-main #newArrivals .item-list.nomg {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.vc-main #newArrivals .item-list .thumb,
.vc-main #newArrivals .item-list .thumb a,
.vc-main #newArrivals .item-list .thumb img,
.vc-main #newArrivals .item-list.nomg .thumb,
.vc-main #newArrivals .item-list.nomg .thumb a,
.vc-main #newArrivals .item-list.nomg .thumb img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
.vc-main #newArrivals .prd-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  line-height: 1.5 !important;
  min-height: 3em !important;
}


/* 12-3. 메인 목록: 국비지원 과정을 과정명 위로 - 10월 8일 추가 */
.vc-main #newArrivals .item-list dd ul {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vc-main #newArrivals .prd-price {
  order: -1 !important;
  align-self: flex-start !important;
  margin-top: 14px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: #E7F0FE !important;
  color: #1E5BC6 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}
.vc-main #newArrivals .prd-name {
  margin-top: 8px !important;
}

/* 13. 메인 모션 배너 - 10월 8일 추가 */
.vcm-banner li a { display: block; }
.vcm-banner .vcm-svg { display: block; width: 100%; height: auto; }
.vcm-banner g { transform-box: fill-box; transform-origin: center; }
@keyframes vcmFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes vcmFloat2 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes vcmPop { 0%,8% { opacity: 0; transform: scale(.85) translateY(10px); } 16% { opacity: 1; transform: scale(1.04); } 22%,88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.95); } }
@keyframes vcmTwinkle { 0%,100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes vcmPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes vcmDraw { 0% { stroke-dashoffset: 1; } 40%,100% { stroke-dashoffset: 0; } }
.vcm-banner .vcm-f1 { animation: vcmFloat 5s ease-in-out infinite; }
.vcm-banner .vcm-f2 { animation: vcmFloat2 4.2s ease-in-out infinite .6s; }
.vcm-banner .vcm-f3 { animation: vcmFloat 6s ease-in-out infinite 1.2s; }
.vcm-banner .vcm-f4 { animation: vcmFloat 3.6s ease-in-out infinite .3s; }
.vcm-banner .vcm-pop { animation: vcmPop 6s ease-out infinite 1s; }
.vcm-banner .vcm-tw1 { animation: vcmTwinkle 2.4s ease-in-out infinite; }
.vcm-banner .vcm-tw2 { animation: vcmTwinkle 2.4s ease-in-out infinite .8s; }
.vcm-banner .vcm-tw3 { animation: vcmTwinkle 2.4s ease-in-out infinite 1.6s; }
.vcm-banner .vcm-pulse { animation: vcmPulse 6s ease-in-out infinite; }
.vcm-banner .vcm-draw { stroke-dasharray: 1; animation: vcmDraw 6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .vcm-banner * { animation: none !important; } .vcm-banner .vcm-draw { stroke-dasharray: none; } }


/* 12-5. 메인 목록 과정명 두 줄 고정 - 10월 8일 추가 */
.vc-main #newArrivals .prd-name {
  height: 3em !important;
  max-height: 3em !important;
  line-height: 1.5 !important;
  overflow: hidden !important;
  padding: 0 !important;
}


/* 16. 메인 영상 영역 (새 디자인) - 10월 8일 추가 */
.vc-main .vc-video { background: #F6F8FB; }
.vc-main .vc-video-in { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.vc-main .vc-video-txt h3 { margin: 0 0 16px; font-size: 34px; font-weight: 800; color: #0F1B33; line-height: 1.35; letter-spacing: -1px; }
.vc-main .vc-video-desc { margin: 0 0 28px; font-size: 16px; font-weight: 500; color: #4A5568; line-height: 1.7; }
.vc-main .vc-video-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.vc-main .vc-btn-navy { background: #0F1B33; color: #fff !important; font-weight: 700; padding: 15px 26px; border-radius: 999px; text-decoration: none; }
.vc-main .vc-btn-outline { border: 2px solid #0F1B33; color: #0F1B33 !important; font-weight: 700; padding: 13px 24px; border-radius: 999px; text-decoration: none; }
.vc-main .vc-video-box { position: relative; width: 100%; padding-top: 56.25%; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(15,27,51,.45); }
.vc-main .vc-video-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media (max-width: 900px) { .vc-main .vc-video-in { grid-template-columns: 1fr; gap: 28px; } }


/* BASIC css end */