/***********************************************
Main-Visual
***********************************************/
.main-visual { position: relative; width: 100%; height: 100vh; overflow:hidden; } 
.main-visual .visual-bg { width: 100%; height: 100%; } 
.main-visual .visual-bg img { width: 100%; height: 100%; object-fit: cover; } 
.main-visual .video { position: relative; width: 100%; background: #000; z-index: -1; } 
.main-visual .video img { position: relative; width: 100%; opacity: 0.6; } 
.main-visual .mv-txt-box { position: absolute; top: 35%; left: 0; width: 100%; text-align: center; color: #fff; } 
.main-visual .mv-txt-box ul li { overflow-y: hidden; opacity:1.0; filter:Alpha(opacity=100); -ms-transform: translateX(0px); -o-transform: translateX(0px); -moz-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } 
.main-visual .mv-txt-box ul li h1 { padding-top: 10px; font-size: 48px; animation: mv-txt-box 0.8s cubic-bezier(0.4, 0, 0.2, 0.5) both; } 
.main-visual .mv-txt-box ul li:nth-of-type(1) h1 b { font-family: "Outfit", sans-serif; font-size: 62px; font-weight: 800; } 
.main-visual .mv-txt-box ul li:nth-of-type(2) h1 { animation-delay: 0.6s; } 
.main-visual .mv-txt-box ul li:nth-of-type(2) h1 b { font-family: "Outfit", sans-serif; } 
.main-visual .mv-ft-box { position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid rgba(255,255,255,.2); } 
.main-visual .mv-ft-box .mv-ft-cont { max-width: 1400px; margin: 0 auto; padding: 0 16px; } 
.main-visual .mv-ft-box .mv-ft-cont:after { content: ''; display: block; clear: both; } 
.main-visual .mv-ft-box .mv-ft-cont > div { position: relative; float: left; width: 33.33%; padding: 65px 0 80px; } 
.main-visual .mv-ft-box .mv-ft-cont > div > div { float: left; } 
.main-visual .mv-ft-box .ft-box:after { content: ''; display: block; clear: both; } 
.main-visual .mv-ft-box .ft-box .ft-img { width: 25%; padding: 8px 30px 0 0; text-align: right; } 
.main-visual .mv-ft-box .ft-box .ft-img img { width: 100%; max-width: 50px; } 
.main-visual .mv-ft-box .ft-box .mv-ft-txt { width: 75%; color: #fff; } 
.main-visual .mv-ft-box .ft-box .mv-ft-txt ul li h5 { padding-bottom: 6px; font-size: 36px; font-weight: 600; font-family: "Outfit", sans-serif; } 
.main-visual .mv-ft-box .ft-box .mv-ft-txt ul li p { font-size: 18px; line-height: 1.6; opacity: .9; } 

@keyframes mv-txt-box { 
 from { transform: translate3d(0, 60%, 0); opacity: 0; } 
 to { transform: translate3d(0, 0, 0); opacity: 1; } 
 }

@media screen and (max-width: 1340px){
 .main-visual { } 
 .main-visual .mv-txt-box ul li h1 { padding-top: 6px; font-size: 36px; word-break: keep-all; } 
 .main-visual .mv-txt-box ul li:nth-of-type(1) h1 b { font-size: 46px; } 
 .main-visual .mv-ft-box .mv-ft-cont > div { padding: 40px 0 50px; } 
 .main-visual .mv-ft-box .ft-box .ft-img { padding: 4px 20px 0 0; } 

 .main-visual .mv-ft-box .ft-box .mv-ft-txt ul li h5 { font-size: 30px; } 
 .main-visual .mv-ft-box .ft-box .mv-ft-txt ul li p { font-size: 16px; word-break: keep-all; } 
 }
@media screen and (max-width: 991px){
 .mv-ft-cont { display: flex; flex-wrap: wrap; } 
 .main-visual .mv-ft-box .mv-ft-cont > div { width: 100%; padding: 16px 0 16px; } 
 .main-visual .mv-txt-box { top: 40%; } 
 .main-visual .mv-txt-box ul li h1 { font-size: 26px; } 
 .main-visual .mv-txt-box ul li:nth-of-type(1) h1 b { font-size: 32px; } 
 .main-visual .mv-ft-txt .br-none { display: none; } 
 .main-visual .mv-ft-box .ft-box .ft-img { text-align: left; width: auto; } 
 }
@media screen and (max-width: 640px){
 .main-visual .mv-ft-box .mv-ft-cont { display: none; } 
 .main-visual .mv-txt-box .br-block { display: block; } 
 .main-visual .mv-txt-box ul li:nth-of-type(1) h1 b { font-size: 36px; } 
 .main-visual .mv-txt-box ul li h1 { font-size: 26px; padding-top: 16px; line-height: 1.5; } 
 /* .main-visual .mv-ft-box .mv-ft-cont > div { padding: 8px 0 8px; } 
 .main-visual .mv-txt-box ul li h1 { line-height: 1.5; } 
 .main-visual .mv-ft-box .ft-box .mv-ft-txt { width: 100%; } 
 .main-visual .mv-ft-box .ft-box .ft-img { display: none; } 
 .main-visual .mv-ft-box .ft-box .ft-img { width: 10%; } 
 .main-visual .mv-ft-box .ft-box .ft-img img { max-width: 28px; } */
 .main-visual .mv-ft-box .ft-box .mv-ft-txt ul li h5 { font-size: 20px; } 
 }



/***********************************************
J-WEB 소개
***********************************************/
.about-container { padding: 0 0 0 230px; } 
.about-wrap { display:flex; justify-content: space-between; align-items: center; } 
.about-wrap div { flex:1; } 
.about-wrap .about-txt-box { max-width: 800px; text-align: center; padding-right: 120px; word-break: keep-all; } 
.about-wrap .about-txt-box div { display:inline-block; text-align:left; } 
.about-wrap .about-txt-box p { margin-top: 35px; font-size: 26px; font-weight: 500; line-height: 1.6; } 
.about-wrap .about-txt-box a { margin-top:20px; display:inline-block; font-size:16px; font-weight:700; border-bottom:2px solid #222; padding-bottom:5px; } 
.about-wrap .about-img { position:relative; padding:135px 50px 135px 0; } 
.about-wrap .about-img .bg { position:absolute; display:block; right:0; top:0; width:70%; height:100%; background:var(--color-main);; z-index:-1; } 

@media screen and (max-width: 1440px){
 .about-container { padding: 0 0 0 50px; } 
 }
@media screen and (max-width: 1280px){
 .about-wrap .about-txt-box p { font-size: 22px; } 
 }
@media screen and (max-width: 1200px){
 .about-container { padding: 0; } 
 .about-wrap { flex-direction: column-reverse; align-items: flex-end; } 
 .about-wrap div { flex: none; width: 100%; text-align: center; } 
 .about-wrap .about-img { padding: 40px; } 
 .about-wrap .about-img .bg { width: 100%; height: 78%; } 
 .about-wrap .about-txt-box { width: 100%; max-width: 100%; padding: 0 16px; word-break: keep-all; } 
 .about-wrap .about-txt-box p { margin-bottom: 60px; } 
 .about-wrap .about-txt-box img { width: 25%; } 
 .about-wrap .about-txt-box div { display: block; text-align: center; } 
 .about-wrap .about-txt-box .br-block { display: block; } 
 }
@media screen and (max-width: 768px){
 .about-img img { width: 100%; } 
 .about-wrap .about-txt-box img { width: 35%; } 
 }
@media screen and (max-width: 480px){
 .about-wrap .about-txt-box img { width: 35%; } 
 .about-wrap .about-txt-box p { font-size: 18px; } 
 .about-wrap .about-txt-box .br-block { display: none; } 
 }



/***********************************************
J-WEB 소개2
***********************************************/
.about2-wrap { position: relative; background: url('../../images/main/about2_bg.jpg') center/cover no-repeat; padding: 160px 20px; color: #fff; text-align: center; overflow: hidden; /* 확대 시 삐져나오는 걸 방지 */ } 
.about2-wrap::before { content: ""; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center; transform: scale(1); /* 기본 */transition: transform 2s ease; z-index: -1; } 
.about2-wrap .about2-txt-box { padding: 60px 40px; border-radius: 16px; word-break: keep-all; } 
.about2-wrap .tp-txt { font-size: 55px; font-weight: 700; line-height: 1.4; margin-bottom: 24px; position: relative; } 
.about2-wrap .tp-txt strong { color: #4cc3ff; } 
.about2-wrap .tp-txt .tp-mark { position: absolute; top: -70px; left: 50%; transform: translateX(-50%); font-size: 50px; color: #4cc3ff; } 
.about2-wrap .ct-txt { font-size: 30px; line-height: 1.6; margin-bottom: 20px; } 
.about2-wrap .bt-txt { font-size: 24px; line-height: 1.6; color: #ddd; margin-top: 50px; } 

@media screen and (max-width: 980px){
 .about2-wrap .about2-txt-box { padding: 40px 24px; padding: 0; } 
 .about2-wrap .tp-txt { font-size: 42px; } 
 .about2-wrap .ct-txt { font-size: 24px; } 
 .about2-wrap .bt-txt { font-size: 20px; } 
 }
@media screen and (max-width: 800px){
 .about2-wrap .br-none { display: none; } 
 }
@media screen and (max-width: 640px){
 .about2-wrap .tp-txt { font-size: 36px; } 
 .about2-wrap .ct-txt { font-size: 20px; } 
 .about2-wrap .bt-txt { font-size: 16px; } 
 }
@media screen and (max-width: 640px){
 .about2-wrap .ct-txt { font-size: 18px; } 
 }



/***********************************************
J-WEB 특장점
***********************************************/
#features { background: #eee; } 
.features-wrap { padding:120px 0; position: relative; display:grid; grid-template-columns: 1fr 2fr; gap:60px; } 
.features-wrap .features-left { position:sticky; top:140px; height:fit-content; } 
.features-wrap .features-title { font-size:40px; line-height:1.2; margin:0; font-weight: 600; } 
.features-wrap .features-title strong { font-size:52px; font-weight:800; } 
.features-wrap .features-right { display:flex; flex-direction:column; gap:60px; } 
.features-wrap .feature-card { position:relative; width:60%; backdrop-filter: blur(12px); z-index: 9; background: linear-gradient(115.3deg, #fff9, #fff9); word-break: keep-all; border-radius:28px; padding:40px; box-shadow:0 10px 30px rgba(0,0,0,.02); display:flex; flex-direction:column; justify-content:space-between; min-height:320px; } 
.features-wrap .feature-card-content h3 { margin:0 0 12px; font-size:34px; line-height:1.4; } 
.features-wrap .feature-card-content b { font-weight:800; } 
.features-wrap .feature-card-content p { font-size: 22px; margin:0; color:#555; line-height:1.6; } 
.features-wrap .feature-card-icon { position:absolute; right:20px; bottom:20px; } 
.features-wrap .icon-circle i { font-size: 120px; color: var(--color-main);; opacity: 0.07; } 
.features-wrap .feature-card:nth-child(odd) { align-self:flex-start; } 
.features-wrap .feature-card:nth-child(even) { align-self:flex-end; } 

/* obj */
.features-wrap .obj-1, .obj-2, .obj-3 { position: absolute; opacity: 0.7; animation: floatY 6s ease-in-out infinite; width: 180px; height: 180px; } 
.features-wrap .obj-1 img, .obj-2 img, .obj-3 img { width: 100%; height: 100%; } 
.features-wrap .obj-1 { top: 10%; right: 15%; animation-delay: 0s; } 
.features-wrap .obj-2 { top: 49%; left: 52%; animation-delay: 4s; } 
.features-wrap .obj-3 { bottom: 14%; right: 15%; animation-delay: 6s; } 

@keyframes floatY { 0%, 100% { transform: translateY(0px); } 
 50% { transform: translateY(-20px); } 
 }
@media screen and (max-width: 1024px){
 .features-wrap .features-title { font-size: 32px; } 
 .features-wrap .features-title strong { font-size: 36px; } 
 .features-wrap .feature-card-content h3 { font-size: 26px; } 
 .features-wrap .feature-card-content p { font-size: 20px; } 
 }
@media screen and (max-width: 900px){
 .features-wrap { grid-template-columns:1fr; gap:40px; } 
 .features-wrap .features-left { position:relative; top:0; } 
 .features-wrap .features-title { position: relative; z-index: 9; } 
 .features-wrap .features-right { gap: 20px; } 
 .features-wrap .feature-card { width:100% !important; align-self:auto; min-height: auto; } 
 .features-wrap .icon-circle i { font-size: 80px; } 

 .features-wrap .obj-1 { top: 7%; right: 15%; } 
 .features-wrap .obj-2 { top: 49%; left: 52%; } 
 .features-wrap .obj-3 { bottom: 14%; left: 15%; } 
 }
@media screen and (max-width: 480px){
 .features-wrap { padding: 80px 0; } 
 .features-wrap .feature-card { padding: 28px; } 
 .features-wrap .feature-card-content h3 { font-size: 24px; } 
 .features-wrap .feature-card-content p { font-size: 18px; } 
 .features-wrap .obj-1, .obj-2, .obj-3 { width: 120px; height: 120px; } 
 .features-wrap .obj-1 { top: 11%; } 
 }



/***********************************************
J-WEB SOLUTION
***********************************************/
.solution-wrap { background: url('https://sws.co.kr/data/skin/respon_default/images/skin/solution-wrap_bg.png') no-repeat right bottom / cover; } 
.solution-wrap .solution-container { position: relative; width: calc(100% - 120px); padding: 110px 16px 0 16px; max-width: 1500px; margin: 0 auto; box-sizing: border-box; display: flex; height:100vh; align-items: center; } 
.solution-title h2 { position: relative; font-size:52px; font-weight: 700; color: #222; line-height: 1.2; font-family: "Outfit", sans-serif; } 
.solution-wrap .solution-title { position: relative; width: 23.4%; min-width: 325px; height: 100%; display: flex; flex-direction: column; justify-content: center; flex-shrink: 0; } 
.solution-wrap .solution-title:before { position: absolute; content:''; bottom: 0; right:0; background: var(--color-main);; width: 100vw; height: 100%; border-radius: 0 80px 0 0; } 
.solution-wrap .tab-menu { position: relative; margin-top: 56px; display: flex; flex-direction: column; gap: 20px; } 
.solution-wrap .tab-menu > li { cursor: pointer; } 
.solution-wrap .tab-list { position: relative; display: flex; align-items: center; padding: 10px 0 10px 10px; font-size: 20px; border-radius: 60px; } 
.solution-wrap .tab-list:before { position: absolute; content:''; width: calc(100% + 30px); height: 100%; top:0; left:0; opacity: 0; border-radius: inherit; background:#fff; box-shadow: 6px 11px 10.5px rgba(0, 0, 0, 0.15); transition: all 0.4s; } 
.solution-wrap .tab-list :where(dt, dd) { position: relative; } 
.solution-wrap .tab-list dt { width: 60px; height: 60px; border-radius: 100%; background: rgba(255,255,255,0.05); font-size: 24px; color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; transition: all 0.4s; } 
.solution-wrap .tab-list dd { width: calc(100% - 60px); font-size: 26px; font-family: "Outfit", sans-serif; font-weight: 500; color:#173791; line-height: 1.35; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-left: 30px; box-sizing: border-box; } 
.solution-wrap .tab-list dd:after { display: inline-flex; content:''; width: 22px; height: 16px; opacity: 0; background: url('https://sws.co.kr/data/skin/respon_default/images/skin/solution-wrap_arw.svg') no-repeat center / 100% auto; transition: all 0.4s; } 

.solution-wrap :where(.solution-title h2, .tab-list dt img, .tab-list dd) { filter: brightness(0) invert(1); transition: all 0.4s; } 
.solution-wrap .on :where(.solution-title h2, .tab-list dt img, .tab-list dd) { filter: none; } 
.solution-wrap .on .tab-list:before { opacity: 1; } 
.solution-wrap .on .tab-list dt { background:#fff; color: var(--color-main);; box-shadow: 0 0 50px rgba(23, 55, 145, 0.12); } 
.solution-wrap .on .tab-list dd { font-size: 28px; font-weight: 600; } 
.solution-wrap .on .tab-list dd:after { opacity: 1; } 

.solution-wrap .tab-content { width: 76.6%; padding-left: clamp(30px, 5vw, 95px); box-sizing: border-box; } 
.solution-wrap .tab-content .tab-item { height: 0; opacity: 0; overflow: hidden; display: flex; align-items: flex-end; transition: all 0.4s; } 
.solution-wrap .tab-content .tab-item.on { height: auto; opacity: 1; overflow: visible; } 
.solution-wrap .tab-content .thumb { width: 55%; font-size: 0; box-sizing: border-box; } 
.solution-wrap .tab-content .txt_wrap { width: 45%; box-sizing: border-box; padding-left:50px; word-break: keep-all; } 
.solution-wrap .tab-content .txt_wrap h4 { font-size: 60px; font-weight: 700; color: #000; line-height: 1.4; letter-spacing: -0.03em; font-family: "Outfit", sans-serif; } 
.solution-wrap .tab-content .txt_wrap h4 + p { margin-top: 26px; } 
.solution-wrap .tab-content .txt_wrap p { font-size: 22px; font-weight: 400; color: #000; line-height: 1.78; letter-spacing: -0.05em; word-break: keep-all; } 
.solution-wrap .tab-content .submit_btn { margin-top: 41px; } 

/* over */
@media screen and (min-width:1024px){
 .solution-wrap .tab-menu > li:hover :where(.solution-title h2, .tab-list dt img, .tab-list dd) { filter: none; } 
 .solution-wrap .tab-menu > li:hover .tab-list:before { opacity: 1; } 
 .solution-wrap .tab-menu > li:hover .tab-list dt { background:#fff; box-shadow: 0 0 50px rgba(23, 55, 145, 0.12); color: var(--color-main);; } 
 .solution-wrap .tab-menu > li:hover .tab-list dd:after { opacity: 1; } 
 }

@media screen and (max-width:1500px){
 .solution-wrap .tab-content .tab-item { flex-direction: column; align-items: center; } 
 .solution-wrap .tab-content .txt_wrap { width: 100%; text-align: center; padding-left: 0; margin-top: 30px; } 
 .solution-wrap .tab-content .thumb { width: 100%; text-align: center; } 
 .solution-wrap .tab-list dd { font-size: 24px; } 
 .solution-wrap .on .tab-list dd { font-size: 26px; } 
 }

@media screen and (max-width:1024px){
 .solution-wrap .solution-container { display: block; height: auto; } 
 .solution-title h2 { font-size: 32px; } 
 .solution-wrap .solution-title { width: 100%; min-width: auto; padding:120px 0 50px; } 
 .solution-wrap .solution-title:before { width: calc(100% + 60px); right:-30px; } 
 .solution-wrap .tab-menu { margin-top:clamp(20px, 5vw, 50px); gap: 15px; flex-direction: row; flex-wrap: wrap; } 
 .solution-wrap .tab-menu > li { width: calc(100% / 2 - 7.5px); } 
 .solution-wrap .tab-list { padding-right: 15px; } 
 .solution-wrap .tab-list:before { width: 100%; } 
 .solution-wrap .tab-list dd { padding-left: 25px; } 
 .solution-wrap .tab-content { width: 100%; padding:100px 0 0; } 
 .solution-wrap .tab-content .txt_wrap { margin-bottom: 60px; } 
 .solution-wrap .tab-content .txt_wrap h4 { font-size: 46px; } 
 .solution-wrap .tab-content .txt_wrap p { font-size: 20px; } 
 }
@media screen and (max-width:980px){
 .solution-wrap .tab-list dd { font-size: 20px; } 
 .solution-wrap .on .tab-list dd { font-size: 20px; } 
 }
@media screen and (max-width:768px){
 .solution-wrap .solution-container { width: calc(100% - 16px); } 
 .solution-title h2 { padding: 0 16px; } 
 .solution-wrap .solution-title:before { width: 100%; right: 0; } 
 .solution-wrap .tab-menu { flex-direction: column; padding: 0 16px; } 
 .solution-wrap .tab-menu > li { width: 100%; } 
 
 .solution-wrap .tab-content .thumb img { width: 100%; } 
 .solution-wrap .tab-content { padding: 26px 0 0; } 
 }
@media screen and (max-width:480px){
 .solution-wrap .solution-title { padding: 60px 0; } 
 .solution-wrap .solution-container { padding: 80px 16px; } 
 .solution-wrap .tab-list dt { height: 40px; } 
 .solution-wrap .tab-content .txt_wrap p { font-size: 18px; } 
 }



/***********************************************
비용안내
***********************************************/
#information { padding-top: 120px; } 
#cost_info { padding-top: 120px; } 
.cost_tit { text-align: center; } 
.cost_tit h2 { font-size: 32px; font-weight: 600; color: #222; } 
.cost_tit h3 { font-size: 52px; font-weight: bold; color: #003e80; } 

#cost_info .cost_ym { display: flex; margin: 50px 0; display: flex; gap: 20px; padding: 10px 20px; justify-content: center; } 
#cost_info .cost_ym button { background: none; border: 2px solid #003e80; padding: 10px 36px; font-size: 24px; font-weight: 600; border-radius: 20px; transition: .3s; cursor: pointer; color: #003e80; } 
#cost_info .cost_ym button:hover { background: #003e80; color: #fff; } 

#cost_info .cost_ym button.active { background: #003e80; color: #fff; } 
#cost_info[data-mode="month"] .year { display: none; } 
#cost_info[data-mode="year"] .month { display: none; } 

.origin-price { font-size: 27px; color: #999; font-weight: 800; position: relative; padding: 0 4px; } 
.origin-price::after { content:""; position:absolute; left:0; top:50%; width:100%; height:2px; background:#ec2b2b; transform:translateY(-50%); } 

#cost_info .cost_list > ul { display: flex; justify-content: space-between; gap: 20px; } 
#cost_info .cost_list > ul > li { width: calc(25% - 15px); border-radius: 15px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); padding: 20px; transition: transform .25s ease, box-shadow .25s ease; will-change: transform; } 



@media (hover: hover){
 #cost_info .cost_list > ul > li:hover { transform: translateY(-8px); box-shadow: 6px 12px 24px rgba(0,0,0,.12); } 
 }
#cost_info .cost_list .tit h3 { font-size: 40px; text-align: center; font-family: "Outfit", sans-serif; font-weight: bold; } 
#cost_info .cost_list .tit h2 { font-size: 19px; text-align: center; color: #e01616; font-weight: bold; padding-top: 16px; } 
#cost_info .cost_list .tit h4 { font-size: 18px; text-align: center; padding: 20px 0 20px; line-height: 1.6; word-break: keep-all; } 

/*** 커스텀마이징 높이 ***/
#cost_info .cost04 .tit h4{    padding: 20px 0 52px;}

/* 월별일때만 !!! */
#cost_info[data-mode="month"] .cost_list .cost04 button{
  margin-top: 47px; 
}

#cost_info .cost { padding: 20px 0; line-height: 1.5; } 
#cost_info .cost p { font-size: 20px; font-weight: 500; } 
#cost_info .cost h3 { font-size: 35px; font-weight: 800; } 
#cost_info .cost01 .cost h3 { color: #85a7d8; } 
#cost_info .cost02 .cost h3 { color: #5f90d9; } 
#cost_info .cost03 .cost h3 { color: #1d62af; } 
#cost_info .cost04 .cost h3 { color: #192c59; } 
#cost_info .cost01 { border-top: 13px solid#85a7d8; } 
#cost_info .cost02 { border-top: 13px solid#5f90d9; } 
#cost_info .cost03 { border-top: 13px solid#1d62af; } 
#cost_info .cost04 { border-top: 13px solid#192c59; } 
#cost_info .cost01 .tit h3 { color: #85a7d8; } 
#cost_info .cost02 .tit h3 { color: #5f90d9; } 
#cost_info .cost03 .tit h3 { color: #1d62af; } 
#cost_info .cost04 .tit h3 { color: #192c59; } 
#cost_info .cost_list button { width: 100%; padding: 20px; color: #fff; border-radius: 10px; border: none; font-size: 20px; font-weight: 600; cursor: pointer; } 

#cost_info .cost_list .cost01 button { background: #85a7d8; } 
#cost_info .cost_list .cost02 button { background: #5f90d9; } 
#cost_info .cost_list .cost03 button { background: #1d62af; } 
#cost_info .cost_list .cost04 button { background: #192c59; } 

#cost_info .cost_list .service { padding: 20px 0; margin-bottom: 20px; border-bottom: 1px solid #d1d1d1; } 
#cost_info .cost04 .service { height: 231px; } 
#cost_info .cost_list .service ul li { display: flex; justify-content: flex-start; align-items: center; } 
#cost_info .cost_list .service_top { display: flex; justify-content: space-between; align-items: center; } 
#cost_info .cost_list .service_icon { display: flex; justify-content: flex-start; align-items: center; padding-bottom: 10px; } 
#cost_info .cost_list .service_icon:last-child { padding: 0; } 
#cost_info .cost_list .service_icon img { width: 40px; margin-right: 10px; } 
#cost_info .cost_list .service_icon p { font-size: 16px; font-weight: 500; word-break: keep-all; } 

#cost_info .service_text p { font-size: 20px; word-break: keep-all; } 
#cost_info .service_text p span { font-weight: 700; } 
#cost_info .cost01 .service_text p span { color: #85a7d8; } 
#cost_info .cost02 .service_text p span { color: #5f90d9; } 
#cost_info .cost03 .service_text p span { color: #1d62af; } 
#cost_info .cost04 .service_text p span { color: #192c59; } 

#cost_info .cost_list .service_bottom { display: flex; justify-content: flex-start; align-items: center; padding-top: 10px; } 
#cost_info .service_bottom img { width: 40px; margin-right: 10px; } 
#cost_info .service_bottom p { font-size: 16px; word-break: keep-all; } 
#cost_info .service_bottom p span { font-weight: 700; font-size: 20px; } 
#cost_info .cost01 .service_bottom p span { color: #85a7d8; } 
#cost_info .cost02 .service_bottom p span { color: #5f90d9; } 
#cost_info .cost03 .service_bottom p span { color: #1d62af; } 
#cost_info .cost04 .service_bottom p span { color: #192c59; font-size: 16px; } 

#cost_info .function h4 { font-size: 20px; font-weight: 600; position: relative; display: inline-block; z-index: 1; padding: 0px 5px 10px; } 
#cost_info .function h4::after { content: ""; width: 100%; height: 3px; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); z-index: -1; } 
#cost_info .cost01 .function h4::after { background: #85a7d8; } 
#cost_info .cost02 .function h4::after { background: #5f90d9; } 
#cost_info .cost03 .function h4::after { background: #1d62af; } 
#cost_info .cost04 .function h4::after { background: #192c59; } 


#cost_info .function_text p { padding-left: 20px; font-size: 16px; line-height: 1.8; position: relative; word-break: keep-all; } 
#cost_info .function_text p::before { content: ""; width: 5px; height: 5px; border-radius: 100%; position: absolute; left: 5px; top: 10.5px; } 
#cost_info .cost01 .function_text p::before { background: #85a7d8; } 
#cost_info .cost02 .function_text p::before { background: #5f90d9; } 
#cost_info .cost03 .function_text p::before { background: #1d62af; } 
#cost_info .cost04 .function_text p::before { background: #192c59; } 

@media screen and (max-width:1435px){
 #cost_info .cost_list .tit h4 br { display: none; } 
 #cost_info .service_text p { text-align: center; } 
 }

@media screen and (max-width:1361px){
    /* 커스텀마이징 높이 맞추기 */
    #cost_info .cost04 .tit h4 {
    padding: 20px 0 27px;
}
}


@media screen and (max-width:1255px){
 #cost_info .cost_list ul { flex-wrap: wrap; } 
 #cost_info .cost_list ul li { width: calc(50% - 10px); } 

     /* 커스텀마이징 높이 맞추기 */
    #cost_info .cost04 .tit h4 {
    padding: 20px 0 52px;
}
 }

@media screen and (max-width:700px){
    /* 커스텀마이징 높이 맞추기 */
    #cost_info .cost04 .tit h4 {
    padding: 20px 0 27px;
}

}


@media screen and (max-width:650px){
 #cost_info .cost_list ul li { width: 100%; } 
 #cost_info .cost_list button { padding: 12px; font-size: 18px; } 

  /* 커스텀마이징 높이 맞추기 */
 #cost_info[data-mode="month"] .cost_list .cost04 button {
    margin-top: 0;
}
 }

@media screen and (max-width:500px){
 #information { padding: 0 0 80px; } 
 .cost_tit h2 { font-size: 20px; } 
 .cost_tit h3 { font-size: 40px; } 
 #cost_info .cost_ym { margin: 30px 0; } 
 #cost_info .cost_ym button { padding: 5px 20px; font-size: 15px; } 
 #cost_info .cost_list .tit h4 br { display: block; } 
 #cost_info .cost_list .tit h3 { font-size: 30px; } 
 #cost_info .cost_list .tit h4 { font-size: 15px; } 
 #cost_info .cost p { font-size: 17px; } 
 #cost_info .cost h3 { font-size: 30px; } 
 #cost_info .cost04 .service { height: auto; } 
 }

@media screen and (max-width:400px){
 .cost_tit h2 { font-size: 16px; } 
 .cost_tit h3 { font-size: 30px; } 
 }


 /*** 오픈 시 고객 준비사항 ***/
.open-guide { padding: 100px 16px; background: #003e80; border-radius: 30px; margin-top: 60px; } 
.guide-inner { max-width:1200px; margin:0 auto; text-align:center; } 
.open-guide h2 { font-size:44px; color:#fff; font-weight:800; word-break: keep-all; } 
.guide-sub { margin: 14px 0 50px; font-size: 27px; font-weight: bold; color: #ffec00; word-break: keep-all; line-height: 1.5; } 
.guide-require { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } 
.req-card { background:#fff; border-radius:18px; padding:32px 20px; box-shadow:0 6px 20px rgba(0,0,0,.08); word-break: keep-all; } 
.req-card span { font-size:32px; color:#003e80; font-weight:900; } 
.req-card h4 { font-size:24px; margin:10px 0; font-weight: bold; } 
.req-card p { font-size: 18px; font-weight: 600; color: #666; } 
.guide-btns { display:flex; justify-content:center; gap:20px; margin:50px 0 20px; } 
.btn-download,
.btn-toggle { padding:14px 34px; border-radius:50px; font-size:18px; font-weight:700; border:2px solid #003e80; border: 2px solid transparent; color:#003e80; background:#fff; transition:.25s; } 
.btn-download:hover,
.btn-toggle:hover { background:#003e80; color:#fff; border: 2px solid #fff; } 


/*** 펼쳐보기 ***/
.guide-detail { max-height:0; overflow: hidden; /* overflow-y: auto; */ transition:.5s ease; background:#fff; border-radius:20px; margin-top:30px; padding:0 30px; /* scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.25) transparent; */ } 
/* .guide-detail::-webkit-scrollbar { width: 6px; } 

.guide-detail::-webkit-scrollbar-track { background: transparent; } 

.guide-detail::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.18); border-radius: 10px; } 

.guide-detail::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.28); } 

 */

.guide-detail.open { max-height:5500px; padding:40px 30px; } 
.guide-detail > h3 { font-size: 28px; font-weight: 700; margin-bottom: 36px; letter-spacing: -0.02em; } 
.guide-block { margin-bottom: 40px; background: #fff; text-align: left; } 

.guide-block > h4 { font-size: 28px; background: #003e80; border-radius: 10px; color: #fff; font-weight: 700; margin-bottom: 20px; padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid #eceff3; letter-spacing: -0.02em; text-align: center; } 

.guide-block h5 { font-size: 24px; font-weight: bold; margin: 26px 0 12px; color: #111; word-break: keep-all; } 

.guide-block p { font-size:20px; font-weight: 700; color: #444; margin: 8px 0 16px; line-height: 1.5; word-break: keep-all; } 
.guide-block ul,
.guide-block ol { margin: 10px 0 0 18px; padding: 0; } 

.guide-block li { font-size: 20px; color: #444; margin-bottom: 8px; line-height: 1.5; word-break: keep-all; } 

.guide-block li ul,
.guide-block li ol { margin-top: 6px; margin-bottom: 6px; } 

.guide-block strong { font-weight: 600; color: #000; } 
.guide-block a { color: #2563eb; text-decoration: underline; } 

.guide-block ol { counter-reset: step; } 
.guide-block ol > li { padding-left: 2px; } 
.guide-block .notice { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: #f5f7fa; font-size: 14px; color: #555; } 



 /*** 타입별 샘플 보기 ***/
.sample-sec { padding: 90px 0; } 
.sample-inner { } 

/* GRID */
.sample-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } 
.sample-card { border: 1px solid rgba(0,0,0,.10); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 14px 32px rgba(0,0,0,.06); transition: transform .25s ease, box-shadow .25s ease; } 
.sample-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(0,0,0,.10); } 

/* THUMB */
.sample-thumb { position: relative; aspect-ratio: 16 / 10; background: rgba(0,0,0,.04); } 
.sample-thumb img { width: 100%; object-fit: cover; display: block; } 
.sample-badge { position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(8px); background: rgba(255,255,255,.8); border: 1px solid rgba(0,0,0,.10); } 

.sample-badge.basic { } 
.sample-badge.standard { } 
.sample-badge.premium { } 

.sample-thumb.auto-scroll { padding: 14px; /* 프레임 여백 */
 background: rgba(0,0,0,.04); } 

/* 화면(창) 역할 */
.sample-viewport { height: 100%; width: 100%; border-radius: 14px; overflow: hidden; background: #111; position: relative; } 

.sample-viewport a { width: 100%; height: 100%; display: block; } 
.sample-viewport a img { position: relative; } 
/* 긴 캡처 이미지 */
.sample-shot { width: 100%; height: auto; display: block; transform: translateY(0); will-change: transform; } 

/* 마우스 올리면 일시정지(원하면 삭제) */
.sample-card:hover .sample-shot { animation-play-state: paused; } 



/* BODY */
.sample-body { padding: 16px 16px 18px; } 
.sample-name { margin: 0 0 6px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-family: "Outfit", sans-serif; } 
.sample-copy { margin: 0 0 14px; font-size: 18px; word-break: keep-all; opacity: .78; line-height: 1.55; } 
.sample-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: #003e80; border: 1px solid rgba(0,0,0,.16); text-decoration: none; color: #fff; font-size: 18px; font-weight: 600; transition: background .2s ease, transform .2s ease; } 
.sample-btn:hover { background: #fff; color: #003e80; border: 1px solid #003e80; } 
.sample-btn:active { transform: translateY(1px); } 


@media screen and (max-width: 768px){
 .sample-grid { grid-template-columns: 1fr; } 

 .guide-detail.open { max-height: 5500px; padding: 12px 16px; } 
 .guide-detail {  } 
 .guide-detail > h3 { font-size: 22px; margin-bottom: 28px; } 
 .guide-block { } 
 .guide-block > h4 { font-size: 19px; } 
 .guide-block h5 { font-size: 16px; } 
 .guide-block li,
 .guide-block p { font-size: 14px; } 
 }
@media screen and (max-width: 640px){
 .sample-sec { padding: 70px 0; } 
 .sample-inner { width: calc(100% - 28px); } 
 .sample-grid { grid-template-columns: 1fr; } 
 .sample-body { padding: 14px 14px 16px; } 
 .sample-btn { width: 100%; } 
 }
@media screen and (max-width: 480px){
 .sample-name { font-size: 20px; } 
 .sample-copy { font-size: 14px; } 
 .sample-btn { font-size: 14px; } 
 .sample-body { padding: 14px; } 
 .sample-thumb.auto-scroll { padding: 10px; } 
 .sample-viewport { border-radius: 10px; } 
 .sample-card { border-radius: 10px; } 
 }

#cost_comp { width: 100%; padding-top: 120px; position: relative; } 

#cost_comp .cost_choice { width: 100%; display: flex; justify-content: flex-end; position: sticky; top: 90px; margin-top: 50px; } 
#cost_comp .cost_choice_wrap { width: 72%; } 
#cost_comp .cost_choice ul { display: flex; justify-content: center; } 
#cost_comp .cost_choice ul li { width: 25%; text-align: center; padding: 20px; background: rgba(245, 245, 245, .7); } 
#cost_comp .cost_choice ul li h2 { font-family: "Outfit", sans-serif; font-size: 30px; font-weight: bold; } 
#cost_comp .cost_choice ul li button { width: 100%; padding: 10px; border-radius: 5px; color: #fff; font-size: 18px; font-weight: 600; cursor: pointer; margin-top: 30px; border: none; } 
/* #cost_comp .cost_choice ul li button.btn-red { background: #f05f5f; } */

#cost_comp .cost_choice .cost_cho01 h2 { color: #85a7d8 } 
#cost_comp .cost_choice .cost_cho02 h2 { color: #5f90d9 } 
#cost_comp .cost_choice .cost_cho03 h2 { color: #1d62af } 
#cost_comp .cost_choice .cost_cho04 h2 { color: #192c59 } 

#cost_comp .cost_choice .cost_cho01 button { background: #85a7d8; } 
#cost_comp .cost_choice .cost_cho02 button { background: #5f90d9; } 
#cost_comp .cost_choice .cost_cho03 button { background: #1d62af; } 
#cost_comp .cost_choice .cost_cho04 button { background: #192c59; } 

#cost_comp .table { padding: 0 0 50px; } 
#cost_comp table { width: 100%; margin: 30px 0; border-collapse: collapse; } 
#cost_comp table tr { font-size: 17px; font-weight: 500; } 
#cost_comp table tr td { padding: 15px 4px; text-align: center; word-break: keep-all; } 

#cost_comp table .td01 { background: rgba(0, 0, 0, 0.1); } 
/* #cost_comp table .td02 { background: #799dd2; } */
#cost_comp table .td03 { background: rgba(0, 0, 0, 0.1); } 
/* #cost_comp table .td04 { background: #192c59; } */

#cost_comp table .left { text-align: start; } 
#cost_comp table tbody .name { text-align: start; border-bottom: 3px solid #003e80; font-weight: 700; padding-bottom: 10px; font-size: 25px; } 
#cost_comp table .table_solution { display: none; } 
.explan-box p { font-size: 16px; color: red; font-weight: 500; } 


/*** 기능 설명 팝업 ****/
.left { position:relative; } 
.detail-tip { display:none; position:absolute; z-index:50; top: -232px; left: 209px; width: min(420px, calc(100vw - 24px)); background:#fff; border:1px solid rgba(0,0,0,.14); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.18); max-height: min(70vh, 420px); overflow: hidden; will-change: transform; overscroll-behavior: contain; } 

.detail-tip.is-open { display:block; } 
.detail-tip__head { width: 100%; padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.08); display:flex; justify-content:space-between; align-items: center; } 
.detail-tip__body { padding: 12px; max-height: calc(min(70vh, 420px) - 52px); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } 
.detail-tip__body img { width:100% !important; height:auto; display:block; border-radius:12px; margin-bottom:10px; } 
.tip-close { width:32px; height:32px; border:0; border-radius:10px; background:rgba(0,0,0,.06); cursor:pointer; font-size:18px; } 
.detail-btn { border: 1px solid #c2c2c2; border-radius: 30px; padding: 4px 10px; } 


@media screen and (max-width:1290px){
 #cost_comp .cost_choice ul li h2 { font-size: 20px; } 
 #cost_comp .cost_choice ul li button { font-size: 14px; } 
 #cost_comp table tr { font-size: 16px; } 
 }

@media screen and (max-width:930px){
 #cost_comp table tbody .name { font-size: 20px; } 
 #cost_comp table colgroup col { width: 20% !important; } 
 #cost_comp .cost_choice_wrap { width: 80%; } 
 #cost_comp table .table_solution { display: contents; } 
 #cost_comp .cost_choice { display: none; } 
 #cost_comp table tr { font-size: 13px; } 
 #cost_comp table tr td { padding: 10px; } 
 #cost_comp table tr td img { width: 15px; } 

 .detail-btn { font-size: 14px; margin-top: 6px; } 
 .detail-tip { top: -154px; left: 102px; } 
 }

@media screen and (max-width:768px){
 .guide-require { grid-template-columns: 1fr; gap: 16px; } 
 }


@media screen and (max-width:640px){
 .detail-tip { width: min(320px, calc(100vw - 24px)); } 
 .detail-btn { font-size: 12px; } 
 }

@media screen and (max-width:500px){
 #cost_comp { padding-top: 80px; } 
 #cost_comp table tbody .name { font-size: 15px; } 
 #cost_comp table tr td { padding: 10px 5px; } 
 #cost_comp table tr { font-size: 10px; } 
 #cost_comp table tr td img { width: 12px; } 

 .explan-box p { font-size: 14px; } 

 .open-guide { padding: 36px 16px; } 
 .open-guide h2 { font-size: 24px; } 
 .guide-sub { font-size: 18px; margin: 8px 0 20px; } 
 .req-card { padding: 14px 20px; } 
 .req-card span { font-size: 24px; } 
 .req-card h4 { font-size: 18px; } 
 .req-card p { font-size: 16px; } 

 .guide-btns { flex-direction: column; } 
 .btn-download, .btn-toggle { font-size: 16px; } 
 .detail-btn { font-size: 9px; padding: 4px 5px; } 
 .detail-tip { top: -154px; left: 66px; width: min(230px, calc(100vw - 24px)); } 
 }

@media screen and (max-width:390px){
 #cost_comp .table { padding: 0; } 
 #cost_comp table tr { font-size: 8.5px; } 
 #cost_comp table tr td img { width: 10px; } 
 }



/***********************************************
메인 가입하기 배너
***********************************************/
.contact-wrap { position: relative; width: 100%; background: url('../../images/main/main_contact_bg.jpg') no-repeat center/cover; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; } 
.contact-wrap .overlay { background: rgba(0,0,0,0.5); padding: 120px 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } 
.contact-wrap .contact-box { text-align: center; max-width: 700px; padding: 20px; } 
.contact-wrap .contact-box .tp-tit { font-size: 40px; font-weight: 600; color: #fff; display: block; margin-bottom: 24px; font-family: "Outfit", sans-serif; } 

.contact-wrap .contact-box h2 { font-size: 48px; font-weight: 700; margin-bottom: 44px; } 
.contact-wrap .contact-box h2 span { color: #4cc3ff; } 
.contact-wrap .contact-box p { font-size: 24px; margin-bottom: 25px; font-weight: 400; line-height: 1.6; } 
.contact-wrap .contact-btn { display: inline-block; padding: 20px 40px; background: var(--color-main);; border: 2px solid transparent; border-radius: 6px; color: #fff; font-size: 20px; font-weight: 600; text-decoration: none; transition: all 0.3s; } 
.contact-wrap .contact-btn:hover { background: transparent; border: 2px solid #fff; } 

@media screen and (max-width:1024px){
 .contact-wrap .contact-box .tp-tit { font-size: 36px; } 
 .contact-wrap .contact-box h2 { font-size: 36px; word-break: keep-all; line-height: 1.5; } 
 .contact-wrap .contact-box p { font-size: 20px; word-break: keep-all; } 
 }
@media screen and (max-width:480px){
 .contact-wrap .contact-box h2 { font-size: 28px; } 
 .contact-wrap .contact-box p { font-size: 18px; } 
 .contact-wrap .contact-btn { padding: 14px 35px; font-size: 18px; } 
 }