@import "common.css";

/** CCTV 페이지 *******************************************************/
.cctv-wrap{
}

/** Section 1 - 상단 배너 *******************************************************/
.cctv-wrap .cctv-section1{
  background: linear-gradient(to top, #FFFFFF 0%, #FFE5EA 100%);
  padding: 102px 0 102px;
}
.cctv-wrap .cctv-section1 .com-center{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap:118px;
}
.cctv-wrap .cctv-section1 .img-box{
  flex-shrink:0;
  width:568px;
  height:288px;
  display:flex;
  align-items: center;
  justify-content: center;
}
.cctv-wrap .cctv-section1 .img-box img{
  max-width:none;
  width:auto;
  height:430px;
  object-fit: contain;
}
.cctv-wrap .cctv-section1 .text-box{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap:0;
  width:434px;
}
.cctv-wrap .cctv-section1 .text-box .title{
  font-size:52px;
  font-weight:800;
  color:#11151D;
  line-height:1.25;
  letter-spacing:-1.3px;
}
.cctv-wrap .cctv-section1 .text-box .title .tab-br{
  display:none;
}
.cctv-wrap .cctv-section1 .text-box .desc{
  margin-top:12px;
  font-size:22px;
  font-weight:600;
  color:#606C85;
  line-height:1.5;
  letter-spacing:-0.44px;
}
.cctv-wrap .cctv-section1 .text-box .cta-btn{
  margin-top:40px;
  display:inline-flex;
  align-items: center;
  justify-content: center;
  padding:18px 28px;
  background:#FF193F;
  color:#FFFFFF;
  font-size:18px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.36px;
  border-radius:8px;
  transition:opacity 0.2s;
  -o-transition:opacity 0.2s;
  -webkit-transition:opacity 0.2s;
}
.cctv-wrap .cctv-section1 .text-box .cta-btn:hover{
  opacity:0.9;
}

@media screen and (max-width:1199px) {
  .cctv-wrap .cctv-section1{
    padding:42px 0 32px;
  }
  .cctv-wrap .cctv-section1 .com-center{
    gap:42px;
    justify-content:center;
  }
  .cctv-wrap .cctv-section1 .img-box{
    flex:none;
    width:358px;
    height:358px;
    max-width:none;
  }
  .cctv-wrap .cctv-section1 .img-box img{
    width:100%;
    height:auto;
    max-width:none;
  }
  .cctv-wrap .cctv-section1 .text-box{
    width:260px;
    max-width:none;
    flex-shrink:0;
  }
  .cctv-wrap .cctv-section1 .text-box .title{
    font-size:48px;
    letter-spacing:-1.2px;
    color:#262831;
  }
  .cctv-wrap .cctv-section1 .text-box .title .tab-br{
    display:inline;
  }
  .cctv-wrap .cctv-section1 .text-box .desc{
    margin-top:14px;
    font-size:18px;
    letter-spacing:-0.36px;
    color:#898EA4;
  }
  .cctv-wrap .cctv-section1 .text-box .cta-btn{
    margin-top:30px;
  }
}

@media screen and (max-width:767px) {
  .cctv-wrap .cctv-section1{
    padding:0 0 60px;
  }
  .cctv-wrap .cctv-section1 .com-center{
    flex-direction: column;
    align-items: center;
    gap:44px;
  }
  .cctv-wrap .cctv-section1 .img-box{
    flex:none;
    width:280px;
    height:auto;
    max-width:280px;
  }
  .cctv-wrap .cctv-section1 .img-box img{
    width:100%;
    height:auto;
  }
  .cctv-wrap .cctv-section1 .text-box{
    width:100%;
    max-width:unset;
    align-items:center;
    text-align:center;
    gap:0;
    margin-top:-60px; /* 이미지 하단 글로우와 텍스트 살짝 겹치게 (figma) */
  }
  .cctv-wrap .cctv-section1 .text-box .title{
    font-size:32px;
    letter-spacing:-0.8px;
  }
  .cctv-wrap .cctv-section1 .text-box .title .tab-br{
    display:none;
  }
  .cctv-wrap .cctv-section1 .text-box .desc{
    margin-top:8px;
    font-size:16px;
    letter-spacing:-0.32px;
  }
  .cctv-wrap .cctv-section1 .text-box .cta-btn{
    margin-top:20px;
    padding:14px 20px;
    font-size:16px;
  }
}

/** Section 2 - 자영업 시장 CCTV *******************************************************/
.cctv-wrap .cctv-section2{
  background:#FFFFFF;
  padding:180px 0;
}
.cctv-wrap .cctv-section2 .com-center{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:56px;
}
.cctv-wrap .cctv-section2 .title-box{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:20px;
  text-align: center;
}
.cctv-wrap .cctv-section2 .title-box .title{
  font-size:44px;
  font-weight:800;
  color:#131419;
  line-height:1.25;
  letter-spacing:-0.88px;
  margin:0;
}
.cctv-wrap .cctv-section2 .title-box .title .hl{
  color:#FF193F;
}
.cctv-wrap .cctv-section2 .tab-mo-title{
  display:none;
}
.cctv-wrap .cctv-section2 .card-list{
  width:100%;
  max-width:1120px;
}
.cctv-wrap .cctv-section2 .swiper-wrapper{
  display:flex;
  gap:24px;
  justify-content: center;
}
.cctv-wrap .cctv-section2 .card{
  position:relative;
  flex-shrink:0;
  width:357px;
  height:300px;
  border-radius:20px;
  overflow:hidden;
  background-color:#434343;
}
.cctv-wrap .cctv-section2 .card .card-img{
  position:absolute;
  max-width:none;
  filter:blur(1px);
  -webkit-filter:blur(1px);
}
.cctv-wrap .cctv-section2 .card-1 .card-img{
  width:252.5%;
  height:180.4%;
  left:-59.32%;
  top:-80.59%;
}
.cctv-wrap .cctv-section2 .card-2 .card-img{
  width:348.4%;
  height:236.8%;
  left:-103.78%;
  top:-81.67%;
}
.cctv-wrap .cctv-section2 .card-3 .card-img{
  width:290.9%;
  height:197.8%;
  left:-30.29%;
  top:-86.56%;
}
.cctv-wrap .cctv-section2 .card::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.48);
  pointer-events:none;
}
.cctv-wrap .cctv-section2 .card .info{
  position:absolute;
  z-index:1;
  left:33.5px;
  bottom:34px;
  display:flex;
  flex-direction:column;
  gap:12px;
  width:290px;
}
.cctv-wrap .cctv-section2 .card .info .name-row{
  display:inline-flex;
  align-items: center;
  gap:6px;
}
.cctv-wrap .cctv-section2 .card .info .name{
  font-size:16px;
  font-weight:500;
  color:#FCFCFD;
  line-height:1.5;
  letter-spacing:-0.32px;
}
.cctv-wrap .cctv-section2 .card .info .tag{
  display:inline-flex;
  align-items: center;
  justify-content: center;
  padding:2px 8px;
  background:#FF6685;
  border-radius:20px;
  color:#FCFCFD;
  font-size:10px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:-0.2px;
  white-space: nowrap;
}
.cctv-wrap .cctv-section2 .card .info .quote{
  margin:0;
  font-size:20px;
  font-weight:700;
  color:#FCFCFD;
  line-height:1.46;
  letter-spacing:-0.4px;
  width:300px;
}

@media screen and (max-width:1199px) {
  .cctv-wrap .cctv-section2{
    padding:120px 0;
  }
  .cctv-wrap .cctv-section2 .com-center{
    gap:48px;
  }
  .cctv-wrap .cctv-section2 .title-box{
    gap:20px;
  }
  .cctv-wrap .cctv-section2 .pc-title{
    display:none;
  }
  .cctv-wrap .cctv-section2 .tab-mo-title{
    display:block;
  }
  .cctv-wrap .cctv-section2 .title-box .title{
    font-size:40px;
    color:#202632;
    letter-spacing:-0.8px;
  }
  .cctv-wrap .cctv-section2 .card-list{
    overflow:visible;
  }
  .cctv-wrap .cctv-section2 .swiper-wrapper{
    display:flex;
    gap:0;
    justify-content: flex-start;
  }
  .cctv-wrap .cctv-section2 .card{
    width:416px;
    height:349.58px;
    border-radius:23.3px;
  }
  .cctv-wrap .cctv-section2 .card .info{
    left:50%;
    transform:translateX(-50%);
    bottom:46px;
    width:337.9px;
    gap:14px;
  }
  .cctv-wrap .cctv-section2 .card .info .name{
    font-size:22.4px;
    letter-spacing:-0.448px;
  }
  .cctv-wrap .cctv-section2 .card .info .tag{
    padding:2.3px 9.3px;
    border-radius:23.3px;
    font-size:14.4px;
    letter-spacing:-0.288px;
  }
  .cctv-wrap .cctv-section2 .card .info .quote{
    font-size:22px;
    font-weight:600;
    line-height:1.5;
    letter-spacing:-0.44px;
    width:349.6px;
  }
}

/** Section 3 - 매장 보안 카드 *******************************************************/
.cctv-wrap .cctv-section3{
  background:#FFFFFF;
  padding:180px 0;
}
.cctv-wrap .cctv-section3 .com-center{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:56px;
}
.cctv-wrap .cctv-section3 .title{
  margin:0;
  font-size:44px;
  font-weight:800;
  color:#131419;
  line-height:1.25;
  letter-spacing:-0.88px;
  text-align:center;
}
.cctv-wrap .cctv-section3 .title .hl{
  color:#FF193F;
}
.cctv-wrap .cctv-section3 .title .tab-mo-br{
  display:none;
}
.cctv-wrap .cctv-section3 .card-list{
  display:flex;
  flex-direction: column;
  gap:20px;
  width:100%;
}
.cctv-wrap .cctv-section3 .card{
  position:relative;
  display:flex;
  align-items: stretch;
  height:343px;
  border-radius:11.571px;
  overflow:hidden;
}
.cctv-wrap .cctv-section3 .card-1{
  background:linear-gradient(270deg, #FF7C8F 0%, #FF193F 100%);
  background-blend-mode: multiply;
}
.cctv-wrap .cctv-section3 .card-2{
  background:linear-gradient(270deg, #F80034 0%, #700020 100%);
}
.cctv-wrap .cctv-section3 .card-3{
  background:linear-gradient(270deg, #C80038 0%, #3C0019 100%);
}
.cctv-wrap .cctv-section3 .card .text-box{
  flex-shrink:0;
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap:12px;
  width:464px;
  padding-left:60px;
}
.cctv-wrap .cctv-section3 .card .text-box .tit{
  font-size:36px;
  font-weight:700;
  color:#FCFCFD;
  line-height:1.25;
  letter-spacing:-0.72px;
}
.cctv-wrap .cctv-section3 .card .text-box .desc{
  margin:0;
  font-size:18px;
  font-weight:500;
  color:#FCFCFD;
  line-height:1.5;
  letter-spacing:-0.36px;
}
.cctv-wrap .cctv-section3 .card .img-box{
  flex:1;
  align-self: stretch;
  font-size:0;
}
.cctv-wrap .cctv-section3 .card .img-box picture,
.cctv-wrap .cctv-section3 .card .img-box img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:2;
  position:relative;
}

@media screen and (max-width:1199px) {
  .cctv-wrap .cctv-section3{
    padding:120px 0;
  }
  .cctv-wrap .cctv-section3 .com-center{
    gap:48px;
  }
  .cctv-wrap .cctv-section3 .title{
    font-size:40px;
    letter-spacing:-0.8px;
  }
  .cctv-wrap .cctv-section3 .title .tab-mo-br{
    display:inline;
  }
  .cctv-wrap .cctv-section3 .card{
    height:198px;
    border-radius:11.571px;
  }
  .cctv-wrap .cctv-section3 .card .text-box{
    flex:1;
    width:auto;
    padding-left:35px;
    gap:8px;
  }
  .cctv-wrap .cctv-section3 .card .text-box .tit{
    font-size:24px;
    letter-spacing:-0.48px;
  }
  .cctv-wrap .cctv-section3 .card .text-box .desc{
    font-size:16px;
    letter-spacing:-0.32px;
  }
  .cctv-wrap .cctv-section3 .card .text-box{
    position:relative;
  }
  .cctv-wrap .cctv-section3 .card .text-box::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    right:-2px;
    width:40%;
    z-index:1;
    pointer-events:none;
  }
  .cctv-wrap .cctv-section3 .card-1 .text-box::after{
    background:linear-gradient(to left, #FF193F 0%, rgba(255,25,63,0) 100%);
  }
  .cctv-wrap .cctv-section3 .card-2 .text-box::after{
    background:linear-gradient(to left, #700020 0%, rgba(112,0,32,0) 100%);
  }
  .cctv-wrap .cctv-section3 .card-3 .text-box::after{
    background:linear-gradient(to left, #3C0019 0%, rgba(60,0,25,0) 100%);
  }
  .cctv-wrap .cctv-section3 .card .img-box{
    position:relative;
    flex:none;
    width:366px;
  }
  .cctv-wrap .cctv-section3 .card .img-box::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:30%;
    z-index:0;
    pointer-events:none;
  }
  .cctv-wrap .cctv-section3 .card-1 .img-box::before{
    background:linear-gradient(to right, #FF193F 0%, rgba(255,25,63,0) 100%);
  }
  .cctv-wrap .cctv-section3 .card-2 .img-box::before{
    background:linear-gradient(to right, #700020 0%, rgba(112,0,32,0) 100%);
  }
  .cctv-wrap .cctv-section3 .card-3 .img-box::before{
    background:linear-gradient(to right, #3C0019 0%, rgba(60,0,25,0) 100%);
  }
}

@media screen and (max-width:767px) {
  .cctv-wrap .cctv-section3{
    padding:80px 0;
  }
  .cctv-wrap .cctv-section3 .com-center{
    gap:32px;
  }
  .cctv-wrap .cctv-section3 .title{
    font-size:32px;
    letter-spacing:-0.64px;
  }
  .cctv-wrap .cctv-section3 .title .pc-tab-only{
    display:none;
  }
  .cctv-wrap .cctv-section3 .card{
    flex-direction: column;
    align-items: stretch;
    height:auto;
    border-radius:16px;
  }
  .cctv-wrap .cctv-section3 .card-1,
  .cctv-wrap .cctv-section3 .card-2,
  .cctv-wrap .cctv-section3 .card-3{
    background:none;
  }
  .cctv-wrap .cctv-section3 .card .text-box{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:3;
    width:100%;
    padding:32px 28px 24px;
  }
  .cctv-wrap .cctv-section3 .card .text-box::after{
    display:none;
  }
  .cctv-wrap .cctv-section3 .card .text-box .tit{
    font-size:24px;
    letter-spacing:-0.48px;
  }
  .cctv-wrap .cctv-section3 .card .text-box .desc{
    font-size:15px;
    letter-spacing:-0.3px;
  }
  .cctv-wrap .cctv-section3 .card .img-box{
    width:100%;
    aspect-ratio:640 / 648;
    flex:none;
  }
  .cctv-wrap .cctv-section3 .card .img-box::before{
    display:none;
  }
}

/** Section 4 - 고스펙 핵심 기능 카드 *******************************************************/
.cctv-wrap .cctv-section4{
  background:#131419;
  padding:180px 0;
}
.cctv-wrap .cctv-section4 .com-center{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:56px;
}
.cctv-wrap .cctv-section4 .title{
  margin:0;
  font-size:44px;
  font-weight:800;
  color:#FFFFFF;
  line-height:1.25;
  letter-spacing:-0.88px;
  text-align:center;
}
.cctv-wrap .cctv-section4 .title .hl{
  color:#FF193F;
}
.cctv-wrap .cctv-section4 .card-list{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  width:100%;
}
.cctv-wrap .cctv-section4 .card{
  position:relative;
  display:flex;
  flex-direction: column;
  border-radius:20px;
  overflow:hidden;
  background:#323A49;
  transition:transform 0.3s, box-shadow 0.3s;
  -o-transition:transform 0.3s, box-shadow 0.3s;
  -webkit-transition:transform 0.3s, box-shadow 0.3s;
}
.cctv-wrap .cctv-section4 .card:hover{
  transform:translateY(-2px);
  -o-transform:translateY(-2px);
  -webkit-transform:translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.cctv-wrap .cctv-section4 .card .img-box{
  width:100%;
  aspect-ratio: 548 / 380;
  overflow:hidden;
  font-size:0;
}
.cctv-wrap .cctv-section4 .card .img-box img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.cctv-wrap .cctv-section4 .card .text-box{
  padding:51px 54px 48px;
  display:flex;
  flex-direction: column;
  gap:20px;
  color:#FFFFFF;
}
.cctv-wrap .cctv-section4 .card .text-box .tit{
  font-size:28px;
  font-weight:700;
  color:#FFFFFF;
  line-height:1.25;
  letter-spacing:-0.56px;
}
.cctv-wrap .cctv-section4 .card .text-box .desc{
  margin:0;
  font-size:22px;
  font-weight:600;
  color:#FFFFFF;
  line-height:1.5;
  letter-spacing:-0.44px;
}

@media screen and (max-width:1199px) {
  .cctv-wrap .cctv-section4{
    padding:120px 0;
  }
  .cctv-wrap .cctv-section4 .com-center{
    gap:48px;
  }
  .cctv-wrap .cctv-section4 .title{
    font-size:40px;
    letter-spacing:-0.8px;
  }
  .cctv-wrap .cctv-section4 .card .text-box{
    padding:24px 31px 24px;
    gap:12px;
  }
  .cctv-wrap .cctv-section4 .card .text-box .tit{
    font-size:20px;
    letter-spacing:-0.4px;
  }
  .cctv-wrap .cctv-section4 .card .text-box .desc{
    font-size:14px;
    font-weight:500;
    letter-spacing:-0.28px;
  }
  .cctv-wrap .cctv-section4 .card .text-box .desc br{
    display:none;
  }
}

@media screen and (max-width:767px) {
  .cctv-wrap .cctv-section4{
    padding:80px 0;
  }
  .cctv-wrap .cctv-section4 .com-center{
    gap:32px;
  }
  .cctv-wrap .cctv-section4 .title{
    font-size:32px;
    letter-spacing:-0.64px;
  }
  .cctv-wrap .cctv-section4 .card-list{
    grid-template-columns: 1fr;
    gap:16px;
  }
  .cctv-wrap .cctv-section4 .card{
    border-radius:16px;
  }
  .cctv-wrap .cctv-section4 .card .text-box{
    padding:25px 32px 24px;
  }
  .cctv-wrap .cctv-section4 .card .text-box .tit{
    font-size:20px;
    letter-spacing:-0.4px;
  }
  .cctv-wrap .cctv-section4 .card .text-box .desc{
    font-size:14px;
    letter-spacing:-0.28px;
  }
}

/** Section 5 - 부가 혜택 5종 *******************************************************/
.cctv-wrap .cctv-section5{
  background:#F5F6FA;
  padding:180px 0;
}
.cctv-wrap .cctv-section5 .com-center{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:56px;
}
.cctv-wrap .cctv-section5 .title{
  margin:0;
  font-size:44px;
  font-weight:800;
  color:#131419;
  line-height:1.25;
  letter-spacing:-0.88px;
  text-align:center;
}
.cctv-wrap .cctv-section5 .title .hl{
  color:#FF193F;
}
.cctv-wrap .cctv-section5 .title .mo-only{
  display:none;
}
.cctv-wrap .cctv-section5 .title .pc-tab-only{
  display:inline;
}
.cctv-wrap .cctv-section5 .benefit-list{
  display:flex;
  justify-content: center;
  gap:24px;
  width:100%;
  list-style:none;
  margin:0;
  padding:0;
}
.cctv-wrap .cctv-section5 .benefit-list .item{
  flex:0 0 205px;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:24px;
}
.cctv-wrap .cctv-section5 .benefit-list .icon-box{
  width:205px;
  height:205px;
  background:#FFFFFF;
  border-radius:20px;
  display:flex;
  align-items: center;
  justify-content: center;
}
.cctv-wrap .cctv-section5 .benefit-list .icon-box img{
  object-fit: contain;
}
.cctv-wrap .cctv-section5 .benefit-list .label{
  margin:0;
  font-size:24px;
  font-weight:700;
  color:#323A49;
  line-height:1.25;
  letter-spacing:-0.48px;
  text-align: center;
}
.cctv-wrap .cctv-section5 .benefit-list .label .pc-only{
  display:inline;
}
.cctv-wrap .cctv-section5 .benefit-list .label .mo-br{
  display:none;
}
.cctv-wrap .cctv-section5 .benefit-list .label .thin{
  font-weight:400;
}

@media screen and (max-width:1199px) {
  .cctv-wrap .cctv-section5{
    padding:120px 0;
  }
  .cctv-wrap .cctv-section5 .com-center{
    gap:48px;
  }
  .cctv-wrap .cctv-section5 .title{
    font-size:40px;
    letter-spacing:-0.8px;
  }
  .cctv-wrap .cctv-section5 .benefit-list{
    flex-direction: column;
    gap:24.3px;
    width:648px;
    max-width:100%;
  }
  .cctv-wrap .cctv-section5 .benefit-list .item{
    flex:none;
    flex-direction: row;
    justify-content: flex-start;
    align-items:center;
    width:100%;
    background:#FFFFFF;
    border-radius:20px;
    padding:0 32px;
    gap:24.3px;
  }
  .cctv-wrap .cctv-section5 .benefit-list .icon-box{
    width:162px;
    height:162px;
    border-radius:0;
    flex-shrink:0;
    background:transparent;
    overflow:hidden;
  }
  .cctv-wrap .cctv-section5 .benefit-list .icon-box img{
    width:auto;
    height:auto;
    object-fit:contain;
  }
  .cctv-wrap .cctv-section5 .benefit-list .label{
    font-size:28px;
    font-weight:700;
    color:#323A49;
    letter-spacing:-0.56px;
    text-align: left;
    white-space:nowrap;
  }
  .cctv-wrap .cctv-section5 .benefit-list .label .mo-only{
    display:none;
  }
  .cctv-wrap .cctv-section5 .benefit-list .label .pc-tab-only{
    display:inline;
  }
  .cctv-wrap .cctv-section5 .benefit-list .label .pc-only{
    display:none;
  }
  .cctv-wrap .cctv-section5 .benefit-list .label .thin{
    font-weight:400;
  }
}

@media screen and (max-width:767px) {
  .cctv-wrap .cctv-section5{
    padding:80px 0;
  }
  .cctv-wrap .cctv-section5 .com-center{
    gap:32px;
  }
  .cctv-wrap .cctv-section5 .title{
    font-size:32px;
    letter-spacing:-0.64px;
  }
  .cctv-wrap .cctv-section5 .title .mo-only{
    display:inline;
  }
  .cctv-wrap .cctv-section5 .title .pc-tab-only{
    display:none;
  }
  .cctv-wrap .cctv-section5 .benefit-list .item{
    padding:0;
    gap:4px;
  }
  .cctv-wrap .cctv-section5 .benefit-list .icon-box{
    width:auto;
    height:auto;
    padding:0 8px;
  }
  .cctv-wrap .cctv-section5 .benefit-list .icon-box img{
    width:80px;
    height:80px;
  }
  .cctv-wrap .cctv-section5 .benefit-list .label{
    padding:15px 0;
    font-size:16px;
    letter-spacing:-0.32px;
    white-space:normal;
  }
  .cctv-wrap .cctv-section5 .benefit-list .label .mo-only{
    display:inline;
  }
  .cctv-wrap .cctv-section5 .benefit-list .label .pc-tab-only{
    display:none;
  }
  .cctv-wrap .cctv-section5 .benefit-list .label .mo-br{
    display:inline;
  }
  .cctv-wrap .cctv-section5 .benefit-list .label .thin{
    font-weight:500;
  }
}

/** Section 6 - 결합 할인 패키지 *******************************************************/
.cctv-wrap .cctv-section6{
  background:linear-gradient(140.658deg, #FF3A7B 1.641%, #FF2247 98.505%);
  padding:180px 0;
}
.cctv-wrap .cctv-section6 .com-center{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:56px;
}
.cctv-wrap .cctv-section6 .title{
  margin:0;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:3px;
  font-size:44px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.88px;
  text-align:center;
}
.cctv-wrap .cctv-section6 .title .line1{
  color:#FFFFFF;
}
.cctv-wrap .cctv-section6 .title .line2{
  color:#CFE3FC;
}
.cctv-wrap .cctv-section6 .combo-wrap{
  width:1120px;
  height:524px;
  border:2px solid rgba(255,255,255,0.66);
  border-radius:400px;
  background:linear-gradient(116.01deg, rgba(255,255,255,0.44) 34.258%, rgba(255,255,255,0.66) 99.055%);
  display:flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.cctv-wrap .cctv-section6 .combo-box{
  display:flex;
  align-items: stretch;
  gap:23.04px;
  width:1075.2px;
}
.cctv-wrap .cctv-section6 .combo-box .item{
  flex:1;
  height:480px;
  background:#FFFFFF;
  border-radius:400px;
  overflow:hidden;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding:70px 38.4px 76.8px;
  box-sizing: border-box;
  text-align: center;
}
.cctv-wrap .cctv-section6 .combo-box .item-torder{
  padding-bottom: 0;
}
.cctv-wrap .cctv-section6 .combo-box .item .info{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap:7.68px;
  width:403.2px;
}
.cctv-wrap .cctv-section6 .combo-box .item .discount{
  margin:0;
  font-size:34.56px;
  font-weight:700;
  color:#202632;
  line-height:1.25;
  letter-spacing:-0.6912px;
}
.cctv-wrap .cctv-section6 .combo-box .item .discount .cate,
.cctv-wrap .cctv-section6 .combo-box .item .discount{
  font-weight:700;
}
.cctv-wrap .cctv-section6 .combo-box .item .discount .hl{
  color:#FF193F;
}
.cctv-wrap .cctv-section6 .combo-box .item .note{
  margin:0;
  font-size:21.12px;
  font-weight:600;
  color:#606C85;
  line-height:1.5;
  letter-spacing:-0.4224px;
}
.cctv-wrap .cctv-section6 .combo-box .item .img-box{
  display:flex;
  align-items: flex-end;
  justify-content: center;
}
.cctv-wrap .cctv-section6 .combo-box .item-cctv .img-box img{
  width:206.77px;
  height:198.33px;
  object-fit:contain;
}
.cctv-wrap .cctv-section6 .combo-box .item-torder .img-box img{
  width:269.76px;
  height:260.04px;
  object-fit:contain;
  object-position: bottom;
}
.cctv-wrap .cctv-section6 .combo-box .plus-icon{
  flex-shrink:0;
  align-self: center;
  position:relative;
  width:48px;
  height:48px;
  background:#FF193F;
  border-radius:50%;
}
.cctv-wrap .cctv-section6 .combo-box .plus-icon::before,
.cctv-wrap .cctv-section6 .combo-box .plus-icon::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  background:#FFFFFF;
  transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
}
.cctv-wrap .cctv-section6 .combo-box .plus-icon::before{
  width:25px;
  height:5px;
}
.cctv-wrap .cctv-section6 .combo-box .plus-icon::after{
  width:5px;
  height:25px;
}
.cctv-wrap .cctv-section6 .cta-btn{
  display:inline-flex;
  align-items: center;
  justify-content: center;
  padding:20px 36px;
  background:#202632;
  color:#FFFFFF;
  font-size:22px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.44px;
  border-radius:100px;
}

@media screen and (max-width:1199px) {
  .cctv-wrap .cctv-section6{
    padding:120px 0;
  }
  .cctv-wrap .cctv-section6 .com-center{
    gap:48px;
  }
  .cctv-wrap .cctv-section6 .title{
    font-size:40px;
    letter-spacing:-0.8px;
  }
  .cctv-wrap .cctv-section6 .combo-wrap{
    width:100%;
    max-width:680px;
    height:auto;
    aspect-ratio: 1120 / 524;
    border-radius:300px;
  }
  .cctv-wrap .cctv-section6 .combo-box{
    width:96%;
    gap:14px;
  }
  .cctv-wrap .cctv-section6 .combo-box .item{
    height:auto;
    aspect-ratio: 490 / 480;
    padding:40px 22px 44px;
    border-radius:300px;
  }
  .cctv-wrap .cctv-section6 .combo-box .item.item-torder {
    padding:40px 22px 0;
  }
  .cctv-wrap .cctv-section6 .combo-box .item .info{
    width:auto;
  }
  .cctv-wrap .cctv-section6 .combo-box .item .discount{
    font-size:20px;
    letter-spacing:-0.52px;
  }
  .cctv-wrap .cctv-section6 .combo-box .item .note{
    font-size:13px;
    letter-spacing:-0.32px;
  }
  .cctv-wrap .cctv-section6 .combo-box .item-cctv .img-box img{
    width:auto;
    height:114px;
  }
  .cctv-wrap .cctv-section6 .combo-box .item-torder .img-box img{
    width:auto;
    height:150px;
  }
  .cctv-wrap .cctv-section6 .combo-box .plus-icon {
    width: 28px;
    height: 28px;
  }
  .cctv-wrap .cctv-section6 .combo-box .plus-icon::before, .cctv-wrap .cctv-section6 .combo-box .plus-icon::after {
    border-radius: 0;
  }
  .cctv-wrap .cctv-section6 .combo-box .plus-icon::after {
    width: 3px;
    height: 15px;
  }
  .cctv-wrap .cctv-section6 .combo-box .plus-icon::before {
    width: 15px;
    height: 3px;
  }
  .cctv-wrap .cctv-section6 .cta-btn{
    padding:18px 32px;
    font-size:20px;
    letter-spacing:-0.4px;
  }
}

@media screen and (max-width:767px) {
  .cctv-wrap .cctv-section6{
    padding:80px 0;
  }
  .cctv-wrap .cctv-section6 .com-center{
    gap:32px;
  }
  .cctv-wrap .cctv-section6 .title{
    font-size:28px;
    letter-spacing:-0.56px;
  }
  .cctv-wrap .cctv-section6 .combo-wrap{
    max-width:320px;
    aspect-ratio: auto;
    height:auto;
    padding:12px 0;
    border-radius:180px;
  }
  .cctv-wrap .cctv-section6 .combo-box{
    flex-direction: column;
    width:calc(100% - 24px);
    gap:14px;
  }
  .cctv-wrap .cctv-section6 .combo-box .item{
    flex:none;
    width:100%;
    height:296px;
    aspect-ratio: auto;
    padding:42px 48px;
    border-radius:160px;
    gap:16px;
  }
  .cctv-wrap .cctv-section6 .combo-box .item .discount{
    font-size:22px;
    letter-spacing:-0.44px;
  }
  .cctv-wrap .cctv-section6 .combo-box .item .note{
    font-size:13px;
    letter-spacing:-0.26px;
  }
  .cctv-wrap .cctv-section6 .combo-box .item.item-torder {
    padding: 42px 0 0;
  }
  .cctv-wrap .cctv-section6 .combo-box .item-cctv .img-box img {
    width:auto;
    height:120px;
  }
  .cctv-wrap .cctv-section6 .combo-box .item-torder .img-box img {
    width:auto;
    height:160px;
  }
  .cctv-wrap .cctv-section6 .combo-box .plus-icon{
    width:40px;
    height:40px;
  }
  .cctv-wrap .cctv-section6 .combo-box .plus-icon::before{
    width:16px;
    height:2.5px;
  }
  .cctv-wrap .cctv-section6 .combo-box .plus-icon::after{
    width:2.5px;
    height:16px;
  }
  .cctv-wrap .cctv-section6 .cta-btn{
    padding:16px 28px;
    font-size:16px;
    letter-spacing:-0.32px;
  }
}

@media screen and (max-width:767px) {
  .cctv-wrap .cctv-section2{
    padding:80px 0;
  }
  .cctv-wrap .cctv-section2 .title-box .title{
    font-size:32px;
    letter-spacing:-0.64px;
  }
  .cctv-wrap .cctv-section2 .card{
    width:300px;
    height:252px;
    border-radius:16px;
  }
  .cctv-wrap .cctv-section2 .card .info{
    bottom:32px;
    width:244px;
    gap:10px;
  }
  .cctv-wrap .cctv-section2 .card .info .name{
    font-size:16px;
    letter-spacing:-0.32px;
  }
  .cctv-wrap .cctv-section2 .card .info .tag{
    padding:2px 8px;
    border-radius:20px;
    font-size:10px;
    letter-spacing:-0.2px;
  }
  .cctv-wrap .cctv-section2 .card .info .quote{
    font-size:16px;
    letter-spacing:-0.32px;
    width:252px;
  }
}

/** Section 7 - 구성별 가격 알아보기 (탭형 채널 구성) *******************************************************/
.cctv-wrap .cctv-section7{
  background:#FFEBF0;
  padding:180px 0;
}
.cctv-wrap .cctv-section7 .com-center{
  display:flex; flex-direction:column; align-items:center; gap:56px;
}
.cctv-wrap .cctv-section7 .title{
  font-family:'Pretendard', sans-serif;
  font-weight:800;
  font-size:44px;
  line-height:1.25;
  letter-spacing:-0.88px;
  text-align:center;
  color:#202632;
}
.cctv-wrap .cctv-section7 .title .hl{
  background:linear-gradient(163.145deg, #FD002A 1.641%, #FF3A7B 98.505%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cctv-wrap .cctv-section7 .product-list{
  display:flex;
  align-items:stretch;
  gap:24px;
  width:100%;
  filter:drop-shadow(2px 2px 10px rgba(255,25,63,0.1));
}
.cctv-wrap .cctv-section7 .product-card{
  flex:1 1 0;
  min-width:0;
  height:458px;
  background:#FFFFFF;
  border-radius:20px;
  padding:48px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:36px;
  overflow:hidden;
}
.cctv-wrap .cctv-section7 .product-card .text-box{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  color:#202632;
  text-align:center;
}
.cctv-wrap .cctv-section7 .product-card .tit{
  font-family:'Pretendard', sans-serif;
  font-weight:700;
  font-size:36px;
  line-height:1.25;
  letter-spacing:-0.72px;
  white-space:nowrap;
}
.cctv-wrap .cctv-section7 .product-card .desc{
  font-family:'Pretendard', sans-serif;
  font-weight:600;
  font-size:22px;
  line-height:1.5;
  letter-spacing:-0.44px;
}
.cctv-wrap .cctv-section7 .product-card .desc .line1,
.cctv-wrap .cctv-section7 .product-card .desc .line2{
  display:block;
}
.cctv-wrap .cctv-section7 .product-card .img-box{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  width:100%;
}
.cctv-wrap .cctv-section7 .product-card .img-box img{
  max-height:200px;
  width:auto;
  object-fit:contain;
}
.cctv-wrap .cctv-section7 .product-card.card-bullet .img-box img{
  max-height:178px;
}
.cctv-wrap .cctv-section7 .product-card.card-dome .img-box img{
  max-height:195px;
}
.cctv-wrap .cctv-section7 .product-card.card-nvr .img-box img{
  max-height:198px;
}

.cctv-wrap .cctv-section7 .channel-box{
  width:100%;
  background:#FFFFFF;
  border-radius:20px;
  padding:0;
  height:470px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:32px;
  position:relative;
}
.cctv-wrap .cctv-section7 .channel-tabs{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:4px;
  background:#F5F6FA;
  border-radius:100px;
  box-shadow:inset 0 0 2.359px 0 rgba(0,0,0,0.07);
}
.cctv-wrap .cctv-section7 .channel-tabs .tab{
  padding:10px 30px;
  border:none;
  background:transparent;
  border-radius:100px;
  font-family:'Pretendard', sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:1.5;
  letter-spacing:-0.36px;
  color:#202632;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
}
.cctv-wrap .cctv-section7 .channel-tabs .tab.on{
  background:#202632;
  color:#F9FAFB;
}

.cctv-wrap .cctv-section7 .channel-content{
  display:none;
  width:100%;
}
.cctv-wrap .cctv-section7 .channel-content.on{
  display:block;
}
.cctv-wrap .cctv-section7 .combo-row{
  display:flex; align-items:center; justify-content:center;
  gap:13px;
  width:888px;
  margin:0 auto;
}
.cctv-wrap .cctv-section7 .combo-item{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  width:260px;
}
.cctv-wrap .cctv-section7 .combo-img{
  width:100%;
  height:200px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  padding:10px;
}
.cctv-wrap .cctv-section7 .combo-img > img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
.cctv-wrap .cctv-section7 .combo-img.bullet-2 > img{
  max-height:180px;
}
.cctv-wrap .cctv-section7 .combo-img.dome-6 > img{
  max-width:230px;
}
.cctv-wrap .cctv-section7 .combo-img.dome-4 > img{
  max-height:170px;
}
.cctv-wrap .cctv-section7 .combo-img.nvr-1 > img{
  width:192px;
  max-width:none;
}
.cctv-wrap .cctv-section7 .combo-label{
  width:100%;
  background:#EBECF4;
  border-radius:100px;
  padding:10px 20px;
  font-family:'Pretendard', sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1.25;
  letter-spacing:-0.4px;
  color:#323A49;
  text-align:center;
  white-space:nowrap;
}
.cctv-wrap .cctv-section7 .plus-svg{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  flex-shrink:0;
  align-self:center;
}
.cctv-wrap .cctv-section7 .plus-svg img{
  width:100%; height:100%;
}

@media screen and (max-width:1199px) {
  .cctv-wrap .cctv-section7{
    padding:120px 0;
  }
  .cctv-wrap .cctv-section7 .com-center{
    gap:48px;
    padding-left:60px;
    padding-right:60px;
  }
  .cctv-wrap .cctv-section7 .title{
    font-size:40px;
    letter-spacing:-0.8px;
  }
  .cctv-wrap .cctv-section7 .title .hl{
    background:none;
    -webkit-background-clip:initial;
    background-clip:initial;
    -webkit-text-fill-color:initial;
    color:#FF193F;
  }
  .cctv-wrap .cctv-section7 .product-list{
    flex-direction:column;
    gap:12px;
  }
  .cctv-wrap .cctv-section7 .product-card{
    flex:none;
    flex-direction:row-reverse;
    justify-content:flex-end;
    width:100%;
    height:129px;
    background:#F9FAFB;
    padding:0 58px;
    gap:40px;
    align-items:center;
  }
  .cctv-wrap .cctv-section7 .product-card .text-box{
    align-items:flex-start;
    gap:8px;
    text-align:left;
    color:#323A49;
    white-space:nowrap;
  }
  .cctv-wrap .cctv-section7 .product-card .tit{
    font-size:24px;
    letter-spacing:-0.48px;
  }
  .cctv-wrap .cctv-section7 .product-card .desc{
    font-weight:500;
    font-size:16px;
    letter-spacing:-0.32px;
  }
  .cctv-wrap .cctv-section7 .product-card .desc .line1,
  .cctv-wrap .cctv-section7 .product-card .desc .line2{
    display:inline;
  }
  .cctv-wrap .cctv-section7 .product-card .desc .line2::before{
    content:" ";
  }
  .cctv-wrap .cctv-section7 .product-card .img-box{
    flex:none;
    width:80px;
    height:80px;
    overflow:hidden;
    position:relative;
  }
  .cctv-wrap .cctv-section7 .product-card .img-box img{
    position:absolute;
    max-height:none;
    object-fit:contain;
  }
  .cctv-wrap .cctv-section7 .product-card.card-bullet .img-box img{
    width:120px;
    height:auto;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
  }
  .cctv-wrap .cctv-section7 .product-card.card-dome .img-box img{
    width:66px;
    height:auto;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
  }
  .cctv-wrap .cctv-section7 .product-card.card-nvr .img-box img{
    width:84px;
    height:auto;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
  }

  .cctv-wrap .cctv-section7 .channel-box{
    height:auto;
    width:100%;
    margin:0 auto;
    border-radius:16px;
    padding:40px 40px 52px;
    gap:20px;
  }
  .cctv-wrap .cctv-section7 .channel-tabs .tab{
    font-size:16px;
    letter-spacing:-0.32px;
  }
  .cctv-wrap .cctv-section7 .combo-row{
    width:400px;
    gap:2px;
  }
  .cctv-wrap .cctv-section7 .combo-item{
    width:180px;
    gap:12px;
  }
  .cctv-wrap .cctv-section7 .combo-img{
    height:141px;
    padding:7px;
  }
  .cctv-wrap .cctv-section7 .combo-img.bullet-2 > img{
    max-height:125px;
  }
  .cctv-wrap .cctv-section7 .combo-img.dome-6 > img{
    max-width:160px;
  }
  .cctv-wrap .cctv-section7 .combo-img.dome-4 > img{
    max-height:120px;
  }
  .cctv-wrap .cctv-section7 .combo-img.nvr-1 > img{
    width:135px;
  }
  .cctv-wrap .cctv-section7 .combo-label{
    width:164px;
    border-radius:70.478px;
    padding:8px 0;
    font-size:14px;
    letter-spacing:-0.28px;
  }
  .cctv-wrap .cctv-section7 .plus-svg{
    width:20px; height:20px;
  }
}

@media screen and (max-width:767px) {
  .cctv-wrap .cctv-section7{
    padding:80px 0;
  }
  .cctv-wrap .cctv-section7 .com-center{
    gap:36px;
    padding-left:20px;
    padding-right:20px;
  }
  .cctv-wrap .cctv-section7 .title{
    font-size:32px;
    letter-spacing:-0.64px;
  }
  .cctv-wrap .cctv-section7 .title .hl{
    color:#FF193F;
  }
  .cctv-wrap .cctv-section7 .product-card{
    background:#FFFFFF;
    padding:0 20px;
    gap:20px;
  }
  .cctv-wrap .cctv-section7 .product-card .text-box{
    color:#323A49;
  }
  .cctv-wrap .cctv-section7 .product-card .tit{
    font-size:20px;
    letter-spacing:-0.4px;
  }
  .cctv-wrap .cctv-section7 .product-card .desc{
    font-size:14px;
    letter-spacing:-0.28px;
  }
  .cctv-wrap .cctv-section7 .product-card .desc .line1,
  .cctv-wrap .cctv-section7 .product-card .desc .line2{
    display:block;
  }
  .cctv-wrap .cctv-section7 .product-card .desc .line2::before{
    content:none;
  }

  .cctv-wrap .cctv-section7 .channel-box{
    border-radius:20px;
    padding:30px 20px;
    width:100%;
    margin:0 auto;
    align-self:center;
  }
  .cctv-wrap .cctv-section7 .channel-tabs{
    width:100%;
    max-width:280px;
    gap:4px;
    padding:4px;
  }
  .cctv-wrap .cctv-section7 .channel-tabs .tab{
    flex:1 1 0;
    min-width:0;
    padding:10px 0;
  }
  .cctv-wrap .cctv-section7 .combo-row{
    flex-direction:column;
    width:208px;
    gap:20px;
  }
  .cctv-wrap .cctv-section7 .combo-item{
    width:208px;
    gap:4px;
  }
  .cctv-wrap .cctv-section7 .combo-img{
    height:150px;
    padding:10px;
  }
  .cctv-wrap .cctv-section7 .combo-img.bullet-2 > img{
    max-height:103px;
  }
  .cctv-wrap .cctv-section7 .combo-img.dome-6{
    height:119px;
    padding: 0 15px 21px;
  }
  .cctv-wrap .cctv-section7 .combo-img.dome-4{
    height:140px;
  }
  .cctv-wrap .cctv-section7 .combo-img.dome-4 > img{
    max-height:125px;
  }
  .cctv-wrap .cctv-section7 .combo-img.nvr-1{
    height:135px;
    padding: 0 27px;
  }
  .cctv-wrap .cctv-section7 .combo-img.nvr-1 > img{
    width:153px;
  }
  .cctv-wrap .cctv-section7 .combo-label{
    width:100%;
    border-radius:80px;
    padding:8px 16px;
    font-size:16px;
    letter-spacing:-0.32px;
  }
  .cctv-wrap .cctv-section7 .plus-svg{
    width:22px; height:22px;
  }
}

/** Section 8 - 자주 묻는 질문 FAQ (torderGpt 동일 다크 모드) *******************************************************/
.cctv-wrap .cctv-section8{
  position:relative;
  width:100%;
  padding:180px 0;
  background:#252730;
}
.cctv-wrap .cctv-section8 .com-center{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.cctv-wrap .cctv-section8-head{
  margin-bottom:48px;
}
.cctv-wrap .cctv-section8-title{
  margin:0;
  font-size:var(--font-size-h4);
  font-weight:800;
  color:var(--color-white);
  text-align:center;
}
.cctv-wrap .cctv-section8 .com-faq-list{
  width:100%;
  max-width:1120px;
}
/* .com-faq-list 박스/타이포 룰은 common.css 공통 스타일을 그대로 사용. 페이지 CSS 는 배경/padding 만 담당. */

@media screen and (max-width:1199px){
  .cctv-wrap .cctv-section8{ padding:120px 0; }
  .cctv-wrap .cctv-section8-head{ margin-bottom:40px; }
  .cctv-wrap .cctv-section8-title{ font-size:var(--font-size-h5); }
}

@media screen and (max-width:599px){
  .cctv-wrap .cctv-section8{ padding:80px 0; }
  .cctv-wrap .cctv-section8-head{ margin-bottom:32px; }
  .cctv-wrap .cctv-section8-title{ font-size:var(--font-size-h6); }
}