.article_header .head_inner .inner_nav .dropDown .submenu { right: -50px; transform: translateX(-30px); left: unset; } /* ------------ 공통 CSS ------------ */ .product { min-height: 100vh; display: flex; align-items: center; flex-direction: column; padding-top: 0; background: #ffffff; } .product .contents_wrap a { color: #000000; } .product .contents_wrap .tabnav { display: flex; width: 100%; height: 10rem; line-height: 10rem; justify-content: space-between; align-items: center; margin-bottom: 5rem; border-bottom: none; } .product .contents_wrap .tabnav .nav-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .product .contents_wrap .tabnav .nav-container { margin: 0 !important; } .product .contents_wrap .tabnav .nav-container .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; } .product .contents_wrap .tabnav .nav-container .swiper-android .swiper-slide, .product .contents_wrap .tabnav .nav-container .swiper-wrapper { transform: translate3d(0px,0,0); } .product .contents_wrap .tabnav .nav-container .swiper-wrapper .swiper-slide { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; } .product .contents_wrap .tabnav .nav-container .swiper-wrapper .swiper-slide { width: fit-content !important; border-radius: 0; } .product .contents_wrap .tabnav .nav-container .swiper-wrapper .swiper-slide.active { position: relative; } .product .contents_wrap .tabnav .btn-box { position: relative; display: flex; height: fit-content; gap: 1rem; } .product .contents_wrap .tabnav .themeMo { display: none; } .product .contents_wrap .tabnav .btn-box::before { content: ''; position: absolute; right: 0; top: 0; width: 200px; height: 40px; background: #ffffff; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 20%); z-index: 1; } .product .contents_wrap .tabnav .btn-box .btn { position: relative; width: 40px; height: 40px; border-radius: 100%; border: 1px solid #cccccc; z-index: 2; cursor: pointer; } .product .contents_wrap .tabnav .btn-box .btn .icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 21px; } .product .contents_wrap .tabnav li a { position: relative; display: inline-block; width: 100%; height: 40px; line-height: 40px; font-size: 1.8rem; font-weight: 700; box-sizing: border-box; text-align: center; } .product .contents_wrap .tabnav li a:hover { color: #354cda; transition: 0.3s; } .product .contents_wrap .tabnav.fixed li a { color: rgba(255,255,255,0.6); } .product .contents_wrap .tabnav.fixed li a:hover { color: #ffffff; transition: 0.3s; } .product .contents_wrap .tabnav.fixed .btn-box::before { background: #222222; background: linear-gradient(90deg, rgba(34, 34, 34, 0.1), #222222 20%); z-index: 1; } .product .contents_wrap .tabnav.fixed .btn-box .btn { color: #ffffff; border: 1px solid rgba(255,255,255,0.4); } .product .contents_wrap .tabnav.fixed .btn-box .btn.menu { border: 1px solid rgba(255,255,255,0.4); } .product .contents_wrap .tabcontent { width: 100%; } .product .contents_wrap .tabcontent .tab_inner h1 { font-size: 3rem; } .product .contents_wrap .tabcontent .tab_inner .single_component { font-size: 1.8rem; } .product .contents_wrap .tabcontent .tab_inner .single_component .inner_tit { flex: 0 0 15%; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container { margin-bottom: 15rem; padding-bottom: 15rem; border-bottom: 1px solid #eeeeee; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container:first-child, .product .contents_wrap .tabcontent .tab_inner .single_component .component_container:last-child { padding-bottom: 0; border-bottom: none; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro { background-color: #333646; border-radius: 3rem; overflow: hidden; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner { display: flex; align-items: center; min-height: 400px; padding: 4rem 6rem; background: url(../images/img_product_introbg.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner .component_intro_txt { width: 100%; height: 100%; color: #ffffff; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner .component_intro_txt p { color: #ffffff; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner .component_intro_txt .title { margin-bottom: 4rem; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner .component_intro_txt .title h3 { font-size: 4rem; font-weight: 800; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner .component_intro_txt .title h3 br.mo { display: none; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner .component_intro_txt .title .label { display: inline-block; margin-bottom: 1rem; font-weight: 600; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner .component_intro_txt .desc p { position: relative; margin: 0 0 2rem 4rem; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner .component_intro_txt .desc p:last-child { margin-bottom: 0; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner .component_intro_txt .desc p::before { position: absolute; content: ''; top: 4px; left: -40px; width: 22px; height: 22px; border-radius: 100%; background: #40475c; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner .component_intro_txt .desc p::after { position: absolute; content: ''; top: 11px; left: -34px; width: 8px; height: 4px; border: solid #ffffff; border-width: 0 0 2px 2px; transform: rotate(-45deg); } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section { display: grid; grid-template-columns: 25% minmax(0, auto); } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .component_title { z-index: 1; position: relative; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .component_title::after { position: absolute; content: ''; left: -300px; top: 0; width: 300px; height: 100%; background: #ffffff; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .component_content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8rem 6rem; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .component_content li { width: 100%; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .component_content .text h5 { margin-bottom: 1rem; } /* ------------ 주요기능 ------------ */ .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .content_function li .text .icon { display: inline-block; width: 60px; height: 60px; margin-bottom: 2rem; } /* 주요기능 - WAVE Caption */ .product .contents_wrap .tabcontent .tab_inner.caption .single_component .component_container .component_section .content_function li:nth-child(1) .text .icon { background: url(../images/product/ic_majorpd_42.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.caption .single_component .component_container .component_section .content_function li:nth-child(2) .text .icon { background: url(../images/product/ic_majorpd_43.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.caption .single_component .component_container .component_section .content_function li:nth-child(3) .text .icon { background: url(../images/product/ic_majorpd_44.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.caption .single_component .component_container .component_section .content_function li:nth-child(4) .text .icon { background: url(../images/product/ic_majorpd_45.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.caption .single_component .component_container .component_section .content_function li:nth-child(5) .text .icon { background: url(../images/product/ic_majorpd_46.png) no-repeat center; background-size: contain; } /* 주요기능 - CCMS */ .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_function li:nth-child(1) .text .icon { background: url(../images/product/ic_majorpd_36.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_function li:nth-child(2) .text .icon { background: url(../images/product/ic_majorpd_37.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_function li:nth-child(3) .text .icon { background: url(../images/product/ic_majorpd_38.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_function li:nth-child(4) .text .icon { background: url(../images/product/ic_majorpd_39.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_function li:nth-child(5) .text .icon { background: url(../images/product/ic_majorpd_40.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_function li:nth-child(6) .text .icon { background: url(../images/product/ic_majorpd_41.png) no-repeat center; background-size: contain; } /* 주요기능 - Call Connect */ .product .contents_wrap .tabcontent .tab_inner.callconnect .single_component .component_container .component_section .content_function li:nth-child(1) .text .icon { background: url(../images/product/ic_majorpd_32.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.callconnect .single_component .component_container .component_section .content_function li:nth-child(2) .text .icon { background: url(../images/product/ic_majorpd_33.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.callconnect .single_component .component_container .component_section .content_function li:nth-child(3) .text .icon { background: url(../images/product/ic_majorpd_04.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.callconnect .single_component .component_container .component_section .content_function li:nth-child(4) .text .icon { background: url(../images/product/ic_majorpd_34.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.callconnect .single_component .component_container .component_section .content_function li:nth-child(5) .text .icon { background: url(../images/product/ic_majorpd_35.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.callconnect .single_component .component_container .component_section .content_function li:nth-child(6) .text .icon { background: url(../images/product/ic_majorpd_15.png) no-repeat center; background-size: contain; } /* 주요기능 - 보이는 ARS 구축형 */ .product .contents_wrap .tabcontent .tab_inner.buildup .single_component .component_container .component_section .content_function li:nth-child(1) .text .icon { background: url(../images/product/ic_majorpd_01.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.buildup .single_component .component_container .component_section .content_function li:nth-child(2) .text .icon { background: url(../images/product/ic_majorpd_02.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.buildup .single_component .component_container .component_section .content_function li:nth-child(3) .text .icon { background: url(../images/product/ic_majorpd_03.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.buildup .single_component .component_container .component_section .content_function li:nth-child(4) .text .icon { background: url(../images/product/ic_majorpd_04.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.buildup .single_component .component_container .component_section .content_function li:nth-child(5) .text .icon { background: url(../images/product/ic_majorpd_05.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.buildup .single_component .component_container .component_section .content_function li:nth-child(6) .text .icon { background: url(../images/product/ic_majorpd_06.png) no-repeat center; background-size: contain; } /* 주요기능 - 보이는 ARS 클라우드 연동형 */ .product .contents_wrap .tabcontent .tab_inner.cloud .single_component .component_container .component_section .content_function li:nth-child(1) .text .icon { background: url(../images/product/ic_majorpd_07.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.cloud .single_component .component_container .component_section .content_function li:nth-child(2) .text .icon { background: url(../images/product/ic_majorpd_08.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.cloud .single_component .component_container .component_section .content_function li:nth-child(3) .text .icon { background: url(../images/product/ic_majorpd_09.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.cloud .single_component .component_container .component_section .content_function li:nth-child(4) .text .icon { background: url(../images/product/ic_majorpd_10.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.cloud .single_component .component_container .component_section .content_function li:nth-child(5) .text .icon { background: url(../images/product/ic_majorpd_11.png) no-repeat center; background-size: contain; } /* 주요기능 - Visual AI */ .product .contents_wrap .tabcontent .tab_inner.visualai .single_component .component_container .component_section .content_function li:nth-child(1) .text .icon { background: url(../images/product/ic_majorpd_12.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.visualai .single_component .component_container .component_section .content_function li:nth-child(2) .text .icon { background: url(../images/product/ic_majorpd_13.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.visualai .single_component .component_container .component_section .content_function li:nth-child(3) .text .icon { background: url(../images/product/ic_majorpd_14.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.visualai .single_component .component_container .component_section .content_function li:nth-child(4) .text .icon { background: url(../images/product/ic_majorpd_15.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.visualai .single_component .component_container .component_section .content_function li:nth-child(5) .text .icon { background: url(../images/product/ic_majorpd_16.png) no-repeat center; background-size: contain; } /* 주요기능 - 멀티미디어 발신자 표시 서비스 */ .product .contents_wrap .tabcontent .tab_inner.multimedia .single_component .component_container .component_section .content_function li:nth-child(1) .text .icon { background: url(../images/product/ic_majorpd_17.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.multimedia .single_component .component_container .component_section .content_function li:nth-child(2) .text .icon { background: url(../images/product/ic_majorpd_18.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.multimedia .single_component .component_container .component_section .content_function li:nth-child(3) .text .icon { background: url(../images/product/ic_majorpd_19.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.multimedia .single_component .component_container .component_section .content_function li:nth-child(4) .text .icon { background: url(../images/product/ic_majorpd_20.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.multimedia .single_component .component_container .component_section .content_function li:nth-child(5) .text .icon { background: url(../images/product/ic_majorpd_21.png) no-repeat center; background-size: contain; } /* 주요기능 - 부재중 전화 안내 팝업 서비스 */ .product .contents_wrap .tabcontent .tab_inner.absensce .single_component .component_container .component_section .content_function li:nth-child(1) .text .icon { background: url(../images/product/ic_majorpd_22.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.absensce .single_component .component_container .component_section .content_function li:nth-child(2) .text .icon { background: url(../images/product/ic_majorpd_23.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.absensce .single_component .component_container .component_section .content_function li:nth-child(3) .text .icon { background: url(../images/product/ic_majorpd_19.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.absensce .single_component .component_container .component_section .content_function li:nth-child(4) .text .icon { background: url(../images/product/ic_majorpd_20.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.absensce .single_component .component_container .component_section .content_function li:nth-child(5) .text .icon { background: url(../images/product/ic_majorpd_21.png) no-repeat center; background-size: contain; } /* 주요기능 - 모바일 채널 연결 서비스 */ .product .contents_wrap .tabcontent .tab_inner.mobile .single_component .component_container .component_section .content_function li:nth-child(1) .text .icon { background: url(../images/product/ic_majorpd_24.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.mobile .single_component .component_container .component_section .content_function li:nth-child(2) .text .icon { background: url(../images/product/ic_majorpd_25.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.mobile .single_component .component_container .component_section .content_function li:nth-child(3) .text .icon { background: url(../images/product/ic_majorpd_26.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.mobile .single_component .component_container .component_section .content_function li:nth-child(4) .text .icon { background: url(../images/product/ic_majorpd_27.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.mobile .single_component .component_container .component_section .content_function li:nth-child(5) .text .icon { background: url(../images/product/ic_majorpd_28.png) no-repeat center; background-size: contain; } /* 주요기능 - 상담 만족도/설문조사 */ .product .contents_wrap .tabcontent .tab_inner.survey .single_component .component_container .component_section .content_function li:nth-child(1) .text .icon { background: url(../images/product/ic_majorpd_29.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.survey .single_component .component_container .component_section .content_function li:nth-child(2) .text .icon { background: url(../images/product/ic_majorpd_30.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner.survey .single_component .component_container .component_section .content_function li:nth-child(3) .text .icon { background: url(../images/product/ic_majorpd_31.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section li .img { width: 100%; height: 300px; border-radius: 2rem; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section li .text { margin-top: 2rem; } /* ------------ 도입효과 ------------ */ /* CCMS */ .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_effect li:nth-child(1) .img { background: url(../images/img_effect_24.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_effect li:nth-child(2) .img { background: url(../images/img_effect_25.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_effect li:nth-child(3) .img { background: url(../images/img_effect_04.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_effect li:nth-child(4) .img { background: url(../images/img_effect_17.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_effect li:nth-child(5) .img { background: url(../images/img_effect_14.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_effect li:nth-child(6) .img { background: url(../images/img_effect_06.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_effect li:nth-child(7) .img { background: url(../images/img_effect_26.png) no-repeat center; background-size: cover; } /* Call Connect */ .product .contents_wrap .tabcontent .tab_inner.callconnect .single_component .component_container .component_section .content_effect li:nth-child(1) .img { background: url(../images/img_effect_17.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.callconnect .single_component .component_container .component_section .content_effect li:nth-child(2) .img { background: url(../images/img_effect_18.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.callconnect .single_component .component_container .component_section .content_effect li:nth-child(3) .img { background: url(../images/img_effect_19.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.callconnect .single_component .component_container .component_section .content_effect li:nth-child(4) .img { background: url(../images/img_effect_20.png) no-repeat center; background-size: cover; } /* 보이는 ARS 구축형 */ .product .contents_wrap .tabcontent .tab_inner.buildup .single_component .component_container .component_section .content_effect li:nth-child(1) .img { background: url(../images/img_effect_11.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.buildup .single_component .component_container .component_section .content_effect li:nth-child(2) .img { background: url(../images/img_effect_08.jpg) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.buildup .single_component .component_container .component_section .content_effect li:nth-child(3) .img { background: url(../images/img_effect_12.png) no-repeat center; background-size: cover; } /* 보이는 ARS 클라우드 연동형 */ .product .contents_wrap .tabcontent .tab_inner.cloud .single_component .component_container .component_section .content_effect li:nth-child(1) .img { background: url(../images/img_effect_21.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.cloud .single_component .component_container .component_section .content_effect li:nth-child(2) .img { background: url(../images/img_effect_14.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.cloud .single_component .component_container .component_section .content_effect li:nth-child(3) .img { background: url(../images/img_effect_15.png) no-repeat center; background-size: cover; } /* Visual AI */ .product .contents_wrap .tabcontent .tab_inner.visualai .single_component .component_container .component_section .content_effect li:nth-child(1) .img { background: url(../images/img_effect_22.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.visualai .single_component .component_container .component_section .content_effect li:nth-child(2) .img { background: url(../images/img_effect_01.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.visualai .single_component .component_container .component_section .content_effect li:nth-child(3) .img { background: url(../images/img_effect_23.png) no-repeat center; background-size: cover; } /* 멀티미디어 발신자 표시 서비스 */ .product .contents_wrap .tabcontent .tab_inner.multimedia .single_component .component_container .component_section .content_effect li:nth-child(1) .img { background: url(../images/img_effect_04.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.multimedia .single_component .component_container .component_section .content_effect li:nth-child(2) .img { background: url(../images/img_effect_05.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.multimedia .single_component .component_container .component_section .content_effect li:nth-child(3) .img { background: url(../images/img_effect_06.png) no-repeat center; background-size: cover; } /* 부재중 전화 안내 팝업 서비스 */ .product .contents_wrap .tabcontent .tab_inner.absensce .single_component .component_container .component_section .content_effect li:nth-child(1) .img { background: url(../images/img_effect_13.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.absensce .single_component .component_container .component_section .content_effect li:nth-child(2) .img { background: url(../images/img_effect_05.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.absensce .single_component .component_container .component_section .content_effect li:nth-child(3) .img { background: url(../images/img_effect_06.png) no-repeat center; background-size: cover; } /* 모바일 채널 연결 서비스 */ .product .contents_wrap .tabcontent .tab_inner.mobile .single_component .component_container .component_section .content_effect li:nth-child(1) .img { background: url(../images/img_effect_21.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.mobile .single_component .component_container .component_section .content_effect li:nth-child(2) .img { background: url(../images/img_effect_12.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.mobile .single_component .component_container .component_section .content_effect li:nth-child(3) .img { background: url(../images/img_effect_04.png) no-repeat center; background-size: cover; } /* 상담 만족도/설문조사 */ .product .contents_wrap .tabcontent .tab_inner.survey .single_component .component_container .component_section .content_effect li:nth-child(1) .img { background: url(../images/img_effect_04.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.survey .single_component .component_container .component_section .content_effect li:nth-child(2) .img { background: url(../images/img_effect_14.png) no-repeat center; background-size: cover; } /* ------------ 추천 고객사 ------------ */ /* WAVE Caption */ .product .contents_wrap .tabcontent .tab_inner.caption .single_component .component_container .component_section .content_recommand li:nth-child(1) .img { background: url(../images/img_recommand_07.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.caption .single_component .component_container .component_section .content_recommand li:nth-child(2) .img { background: url(../images/img_recommand_08.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.caption .single_component .component_container .component_section .content_recommand li:nth-child(3) .img { background: url(../images/img_recommand_05.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.caption .single_component .component_container .component_section .content_recommand li:nth-child(4) .img { background: url(../images/img_recommand_06.png) no-repeat center; background-size: cover; } /* CCMS */ .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_recommand li:nth-child(1) .img { background: url(../images/img_recommand_05.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.ccms .single_component .component_container .component_section .content_recommand li:nth-child(2) .img { background: url(../images/img_recommand_06.png) no-repeat center; background-size: cover; } /* Call Connect */ .product .contents_wrap .tabcontent .tab_inner.callconnect .single_component .component_container .component_section .content_recommand li:nth-child(1) .img { background: url(../images/img_recommand_01.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.callconnect .single_component .component_container .component_section .content_recommand li:nth-child(2) .img { background: url(../images/img_recommand_02.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.callconnect .single_component .component_container .component_section .content_recommand li:nth-child(3) .img { background: url(../images/img_recommand_03.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner.callconnect .single_component .component_container .component_section .content_recommand li:nth-child(4) .img { background: url(../images/img_recommand_04.png) no-repeat center; background-size: cover; } /* ------------ 연관 서비스 ------------ */ .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .content_service li .linkto_detail { display: flex; align-items: center; gap: 1rem; margin-top: 3rem; font-weight: 700; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .content_service li .linkto_detail .arrow { position: relative; width: 24px; height: 24px; border-radius: 1.5rem; border: 0; box-shadow: 0 2px 6px -3px rgb(0 0 0 / 20%); background-color: #000000; overflow: hidden; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .content_service li .linkto_detail .arrow::after { position: absolute; content: ''; top: 8px; left: 7px; transform: rotate(45deg); width: 6px; height: 6px; border: 1px solid #ffffff; border-width: 1px 1px 0 0; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .content_service li .img { height: 150px; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .content_service li:nth-child(1) .img { background: url(../images/img_relative_01.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .content_service li:nth-child(2) .img { background: url(../images/img_relative_02.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .content_service li:nth-child(3) .img { background: url(../images/img_relative_03.png) no-repeat center; background-size: cover; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .content_service li:nth-child(4) .img { background: url(../images/img_relative_04.png) no-repeat center; background-size: cover; } /* ------------ 고객사례 ------------ */ /* 보이는 ARS(디지털 ARS) - 구축형 */ .swiper-slide .item_img.img01 { background: url(../images/img_majorpd_meritsfire.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img02 { background: url(../images/img_majorpd_kbcard.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img03 { background: url(../images/img_majorpd_hanacard.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img04 { background: url(../images/img_majorpd_krinvest.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img05 { background: url(../images/img_majorpd_hanhwafire.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img06 { background: url(../images/img_majorpd_kblife.png) no-repeat center; background-size: contain; } /* 보이는 ARS(디지털 ARS) - 연동형 */ .swiper-slide .item_img.img07 { background: url(../images/img_majorpd_hyundaish.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img08 { background: url(../images/img_majorpd_cjlogi.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img09 { background: url(../images/img_majorpd_mobins.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img10 { background: url(../images/img_majorpd_emart24.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img11 { background: url(../images/img_majorpd_gssh.png) no-repeat center; background-size: contain; } /* 멀티미디어 발신자 표시 서비스 */ .swiper-slide .item_img.img12 { background: url(../images/img_majorpd_shinhanbankipp.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img13 { background: url(../images/img_majorpd_samsungcard.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img14 { background: url(../images/img_majorpd_tongyoung.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img15 { background: url(../images/img_majorpd_encar.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img16 { background: url(../images/img_majorpd_welrix.png) no-repeat center; background-size: contain; } /* 부재중 전화 안내 팝업 서비스 */ .swiper-slide .item_img.img17 { background: url(../images/img_majorpd_dbfire.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img18 { background: url(../images/img_majorpd_hanhwafireipe01.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img19 { background: url(../images/img_majorpd_shinhanbank.png) no-repeat center; background-size: contain; } /* 모바일 채널 연결 서비스 */ .swiper-slide .item_img.img20 { background: url(../images/img_majorpd_cjoshop.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img21 { background: url(../images/img_majorpd_tway.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img22 { background: url(../images/img_majorpd_lottesh.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img23 { background: url(../images/img_majorpd_dbfirewv.png) no-repeat center; background-size: contain; } /* 상담 만족도/설문조사 */ .swiper-slide .item_img.img24 { background: url(../images/img_majorpd_lotteshipe.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img25 { background: url(../images/img_majorpd_hyundaidepartipe.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img26 { background: url(../images/img_majorpd_lottecapital.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img27 { background: url(../images/img_majorpd_amway.png) no-repeat center; background-size: contain; } .swiper-slide .item_img.img28 { background: url(../images/img_majorpd_hanhwafireipe02.png) no-repeat center; background-size: contain; } /* ------------ 문의하기 ------------ */ .contact { padding-top: 10rem; padding-bottom: 10rem; background-color: #f5f5f5; } .contact .contents_wrap .inquire .inner_cont { text-align: center; } .contact .contents_wrap .inquire .inner_cont h3 br { display: none; } .contact .contents_wrap .inquire .inner_cont p { color: #666666; } .contact .contents_wrap .inquire .inner_cont a { display: inline-block; height: 60px; line-height: 60px; padding: 0 4rem; margin-top: 4rem; background: #333646; border-radius: 10rem; color: #ffffff; font-size: 1.8rem; font-weight: 600; text-align: center; } .contact .contents_wrap .inquire .inner_cont a i { display: inline-block; font-size: 2rem; } .contact .contents_wrap .inquire .inner_cont a:hover i { transform: translate3d(5px, -5px, 0px); transition: all .3s; } /***** Brand Call *****/ /* ------------ 인트로 ------------ */ .product .contents_wrap .tabcontent .brandcall .item_inner .paragraph_wrap .intro .inner_cont ul li:nth-child(1) dl dt .cont_icon { background: url(../images/ic_calltoweb_01.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .brandcall .item_inner .paragraph_wrap .intro .inner_cont ul li:nth-child(2) dl dt .cont_icon { background: url(../images/ic_calltoweb_01.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .brandcall .item_inner .paragraph_wrap .intro .inner_cont ul li:nth-child(3) dl dt .cont_icon { background: url(../images/ic_calltoweb_01.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .brandcall .item_inner .paragraph_wrap .intro .inner_cont ul li:nth-child(4) dl dt .cont_icon { background: url(../images/ic_calltoweb_01.png) no-repeat center; background-size: contain; } /* ------------ 특징 ------------ */ .product .contents_wrap .tabcontent .brandcall .item_inner .paragraph_wrap .feature .feature_wrap li:nth-child(1) .icon { background: url(../images/ic_calltoweb_11.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .brandcall .item_inner .paragraph_wrap .feature .feature_wrap li:nth-child(2) .icon { background: url(../images/ic_calltoweb_04.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .brandcall .item_inner .paragraph_wrap .feature .feature_wrap li:nth-child(3) .icon { background: url(../images/ic_calltoweb_06.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .brandcall .item_inner .paragraph_wrap .feature .feature_wrap li:nth-child(4) .icon { background: url(../images/ic_calltoweb_05.png) no-repeat center; background-size: contain; } .product .contents_wrap .tabcontent .brandcall .item_inner .paragraph_wrap .feature .feature_wrap li:nth-child(5) .icon { background: url(../images/ic_calltoweb_09.png) no-repeat center; background-size: contain; } /* ============================ media queries ============================ */ @media (max-width: 1920px){ br { display: block; } } @media (max-width: 1700px){ } @media (max-width: 1500px){ .product .contents_wrap .tabnav li a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-break: keep-all; word-wrap: break-word; overflow: hidden; } } @media (max-width: 1200px){ .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section { grid-template-columns: repeat(1, minmax(0, 1fr)); } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .component_title { margin-bottom: 2rem; } } @media (max-width: 991px){ .product .contents_wrap .tabnav { margin-bottom: 6rem; overflow-y: visible; } .product .contents_wrap .tabnav .btn-box { display: none; } .product .contents_wrap .tabnav .nav-container { display: none; } .product .contents_wrap .tabnav .themeMo { display: block; width: 100%; } .product .contents_wrap .tabnav .themeMo .select { position: relative; } .product .contents_wrap .tabnav .themeMo .select:hover { border-color: #222222; color: #000000; transition: all .3s; } .product .contents_wrap .tabnav .themeMo .select .text { display: flex; width: 100%; height: 60px; line-height: 60px; padding: 0 3rem; flex-direction: row; justify-content: space-between; align-items: center; border: 2px solid #dddddd; border-radius: 1rem; font-size: 1.6rem; font-weight: 700; cursor: pointer; user-select: none; } .product .contents_wrap .tabnav .themeMo .select.active .text { border-color: #222222; color: #000000; transition: all .3s; } .product .contents_wrap .tabnav .themeMo .select .text::after { position: absolute; content: ""; top: 22px; right: 3rem; width: 9px; height: 9px; border-top: 2px solid #dddddd; border-right: 2px solid #dddddd; transform: rotate(135deg); } .product .contents_wrap .tabnav .themeMo .select.active .text::after { top: 27px; border-color: #000000; transform: rotate(315deg); transition: 0.5s; transition-delay: 0.1s; } .product .contents_wrap .tabnav .themeMo .select .option-list { position: absolute; top: 120%; left: 0; width: 100%; max-height: 0; overflow: hidden; padding: 1rem; border-radius: 1rem; z-index: 1; background: #ffffff; } .product .contents_wrap .tabnav .themeMo .select.active .option-list { position: absolute; max-height: none; width: 100%; top: 65px; left: 0; right: 0; transition: ease 1s; border-radius: 1rem; box-shadow: 0 4rem 24rem rgba(0, 0, 0, 0.12); color: #707376; z-index: 99999999; animation: dropdown 0.4s ease; background-color: #ffffff; } @keyframes dropdown { 0% { transform: translateY(-75px); } 100% { transform: translateY(0); } } .product .contents_wrap .tabnav .themeMo .select .option-list .option a { height: 60px; line-height: 60px; padding: 0 2rem; text-align: left; font-size: 1.6rem; color: #707376; } .product .contents_wrap .tabnav .themeMo .select .option-list .option:hover { background-color: #f5f5f5; transition: 0.3s; } .bestcase .incont .swiper_wrap .swiper::before, .bestcase .incont .swiper_wrap .swiper::after { display: none; } .swiper-button_wrap { position: absolute; top: 0; right: 0; } } @media (max-width: 768px){ br { display: none; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container { margin-bottom: 10rem; padding-bottom: 10rem; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner { padding: 4rem; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner .component_intro_txt .title h3 { font-size: 3rem; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .component_content { grid-template-columns: repeat(1, minmax(0, 1fr)); } .contact { background-size: contain; background-position: 200px 50%; } } @media (max-width: 683px){ .product { padding-top: 10%; } } @media (max-width: 450px){ .product .contents_wrap .tabcontent .tab_inner .item_inner .paragraph_wrap .caseimg_wrap { display: block; } .product .contents_wrap .tabcontent .tab_inner .item_inner .paragraph_wrap .caseimg_wrap .img_wrapper { margin-bottom: 3rem; } .product .contents_wrap .tabcontent .tab_inner .item_inner .paragraph_wrap .caseimg_wrap .img_wrapper:last-child { margin-bottom: 0; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner .component_intro_txt .desc p { margin-left: 0; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner .component_intro_txt .desc p::after, .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_intro .component_intro_inner .component_intro_txt .desc p::before { display: none; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .content_service li .slide_contents .name_wrap { min-height: 130px; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .content_effect li .img { height: 230px; } .product .contents_wrap .tabcontent .tab_inner .single_component .component_container .component_section .content_recommand li .img { height: 230px; } .contact .contents_wrap .inquire .inner_cont h3 br { display: block; } .contact .contents_wrap .inquire .inner_cont a { margin-top: 2rem; } }