/* ===== MAIN INTRO SECTION ===== */

.page_main { color: #333; line-height: 1.4;}
.page_main section {padding: 100px 0;}
.page_main .inner { max-width: 1240px; padding: 0 20px; margin: 0 auto;}

.main_visual {background: url(/wp-content/uploads/image/main/main_visual_pc.webp) right center / cover no-repeat; height: 740px }
.main_visual .visual_inner {max-width: 1360px; padding: 0 20px; margin: 0 auto;}
.main_visual_content {  padding-top: 87px;}
.main_visual .marker-title { font-size: 65px; font-weight:700; color: #fff;}
.main_visual .marker-title { display: inline; font-weight: 700; line-height: 1.6; padding: 13px 0;
  background-image: linear-gradient(90deg, #155DFC 0%, #15CAFC 100%); background-repeat: no-repeat; background-size: 0% 100%; background-position: left center;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: marker 1s cubic-bezier(.77,0,.18,1) forwards;
}
.main_visual .marker-title:nth-of-type(1) {animation-delay: 0s;}
.main_visual .marker-title:nth-of-type(2) {animation-delay: .45s;}
@keyframes marker {
  to {
    background-size: 100% 100%;
  }
}
.main_visual .main_visual_subtitle { font-size: 24px; color: #333; margin: 18px 0 65px; }
.main_visual .main_visual_btn { display: inline-flex; align-items: center; gap: 12px; background-color: #2F6BF2; color: #FFFFFF; padding: 16px 39px; border-radius: 50px; font-size: 20px; line-height: 1.2; font-weight: 700; }
.main_visual .main_visual_btn:hover { background-color: #1D4ED8;}
.main_visual .main_visual_btn i { font-size: 14px;}

.page_main section.main_logo {padding: 60px 0;}
.main_logo .main_logo_title { font-size: 40px; font-weight: 700; text-align: center; margin-bottom: 60px;}
.main_logo .logo_slide_wrap { overflow: hidden; position: relative;}
.main_logo .logo_slide_wrap ul { display: flex; width: max-content; align-items: center; animation: partnerSlide 30s infinite linear}
.main_logo .logo_slide_wrap ul:hover {animation-play-state: paused}
.main_logo .logo_slide_wrap ul li {display: inline-block; padding-right: 60px}
.main_logo .logo_slide_wrap ul li img { border: none; max-width: 100%!important; height: auto; vertical-align: middle}

@keyframes partnerSlide {
    from {
        transform: translateX(0)
    }
    to {
        transform: translateX(-50%)
    }
}

/* ===== main_intro ===== */
.main_intro {background: linear-gradient(180.21deg, #EFF6FF 0.19%, #FFFFFF 98.44%, #EFF6FF 143.1%);}
.main_intro .main_intro_title { font-size: 42px; font-weight: 700; text-align: center; margin-bottom: 60px;}
.main_intro .main_intro_card { background-color: #fff; border-radius: 14px; border: 1px solid #85ABFF; display: flex; align-items: center; gap: 100px; padding: 39px 36px; overflow: hidden;}
.main_intro .main_intro_image {flex: 1;}
.main_intro .main_intro_image img { width: 100%; height: auto; border-radius: 10px; display: block;}
.main_intro .main_intro_content { flex: 1; max-width: 476px;}
.main_intro .main_intro_subtitle { font-size: 24px; font-weight: 700; line-height: 1.5; color: #1A5EB2; }
.main_intro .main_intro_heading { font-size: 24px; font-weight: 700; margin-bottom: 11px; line-height: 1.5;}
.main_intro .main_intro_desc { font-size: 16px; color:#4A5565; line-height: 1.5; margin-bottom: 30px;}
.main_intro .main_intro_btn { display: inline-flex;justify-content: center; align-items: center; gap: 8px; background-color: #1A5EB2; color: #ffffff; padding: 14px 28px; border-radius: 10px; font-size: 16px; font-weight: 700;}
.main_intro .main_intro_btn:hover { background-color: #0E468C;}
.main_intro .main_intro_btn i {  font-size: 12px;}

/* ===== main_why ===== */
.main_why .main_why_title { font-size: 42px; font-weight: 700; text-align: center; margin-bottom: 20px;}
.main_why .main_why_subtitle { font-size: 20px; text-align: center; color: #4A5565; line-height: 1.5; margin-bottom: 30px;}
.main_why .main_why_container { max-width: 1240px; margin: 0 auto; padding: 20px;}
.main_why .main_why_wrapper { padding: 31px 35px; box-shadow: 3px 4px 4px 0px #A4A4A41A; border: 1px solid #E5E7EB; border-radius: 10px;}
.main_why .main_why_badge { display: inline-block; background-color: #F2F7FF; border: 1px solid #85ABFF; color: #1A5EB2; font-size: 16px; padding: 8px 12px; border-radius: 100px; margin: 0 auto; display: table;}
.main_why .main_why_grid {display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 30px;}
.main_why .main_why_card {position: relative; padding: 24px; text-align: center;}
.main_why .main_why_card_title { font-size: 20px; font-weight: 700; color: #303030; line-height: 1.4; margin-bottom: 12px; display: flex; align-items: center; justify-content: center;}
.main_why .main_why_card::after { display: block; position: absolute; top:0; right:0; content:''; height: 100%; width:1px; background-color: #E5E7EB; }
.main_why .main_why_card.line::after { display: none;}
.main_why .why_img {width: 100%; max-width: 330px; height: auto; border-radius: 12px; }
.main_why .main_why_arrow { display: flex; flex-direction: column; align-items: center; margin: 12px 0;}
.main_why .main_why_warning { background-color: #FEF1F1; border: 1px solid #F2BABA; border-radius: 12px; padding: 20px 0 20px 12px; display: flex; align-items: flex-start; gap: 10px; text-align: left;}
.main_why .main_why_warning p { font-size: 16px; color: #D80C18; font-weight: 700;}

/* ===== main_reason ===== */
.main_reason { background-color: #F8FBFF;}
.main_reason .main_reason_header { text-align: center; margin-bottom: 60px;}
.main_reason .main_reason_subtitle { font-size: 40px; font-weight: 700; color: #1A5EB2; }
.main_reason .main_reason_title { font-size: 40px; font-weight: 700; color: #101828;}
.main_reason .main_reason_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 60px;}
.main_reason .main_reason_card { background-color: #FFFFFF; border-radius: 16px; padding: 24px; text-align: center; border-top: 1px solid #F1F5F9; box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);}
.main_reason .main_reason_icon { display: flex; justify-content: center; margin-bottom: 20px;}
.main_reason .main_reason_card_title { font-size: 18px; font-weight: 700; color: #1A1A1A; line-height: 1.5; margin-bottom: 16px;}
.main_reason .main_reason_card_desc { font-size: 14px; color: #4A5565; line-height: 1.5;}
.main_reason .main_reason_btn_wrap { text-align: center;}
.main_reason .main_reason_btn { display: inline-flex; align-items: center; gap: 8px; background-color: #1A5EB2; color: #FFFFFF; padding: 13px 22px; border-radius: 10px; font-size: 16px; font-weight: 700; }
.main_reason .main_reason_btn:hover {background-color:#0E468C;}

/* ===== main_feature ===== */
.main_feature { background-color: #FFFFFF;}
.main_feature .main_feature_header { text-align: center; margin-bottom: 90px;}
.main_feature .main_feature_title { font-size: 40px; font-weight: 700; color: #101828; margin-bottom: 12px;}
.main_feature .main_feature_subtitle { font-size: 20px; color: #4A5565;}
.main_feature .main_feature_item { display: flex; align-items: center; gap: 80px; margin-bottom: 120px; padding: 0 47px; }
.main_feature .main_feature_item:last-child { margin-bottom: 0;}
.main_feature .main_feature_item_reverse { flex-direction: row-reverse;}
.main_feature .main_feature_image { border-radius: 12px; overflow: hidden; box-shadow: 0px 4px 6px -4px #0000001A;}
.main_feature .main_feature_image img { width: 100%; height: auto; display: block; max-width: 550px;}
.main_feature .main_feature_content { max-width: 476px;}
.main_feature .main_feature_point { display: inline-block; font-size: 14px; font-weight: 700; color: #64748B; margin-bottom: 8px;}
.main_feature .main_feature_item_title { font-size: 24px; font-weight: 700; color: #1A1A1A; line-height: 1.5; margin-bottom: 8px;}
.main_feature .main_feature_desc { font-size: 16px; color: #4A5565;  margin-bottom: 50px;}
.main_feature .main_feature_link { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #2F6BF2; }
.main_feature .main_feature_link i { font-size: 12px;}

/* ===== main_product ===== */
.main_product { background-color: #F8FAFC;}
.main_product_header { text-align: center; margin-bottom: 50px;}
.main_product_title { font-size: 32px; font-weight: 700; color: #1A1A1A; margin-bottom: 16px;}
.main_product_subtitle { font-size: 16px; color: #4A5565; line-height: 1.6;}
.main_product_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; max-width: 1096px; margin: 0 auto;}
.main_product_card {  border-radius: 16px; padding: 32px; box-shadow: 0 1px 2px -1px #0000001A, 0 1px 3px 0 #0000001A; }
.main_product_card_pc { border: 1px solid #DBEAFE; background: linear-gradient(103.97deg, #EFF6FF 2.99%, #FFFFFF 97.49%); }
.main_product_card_server { border: 1px solid #DCFCE7; background: linear-gradient(101.35deg, #F0FDF4 1.15%, #FFFFFF 100.02%); }
.main_product_card_header { margin-bottom: 30px;}
.main_product_icon { width: 80px; height: 80px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px;}
.main_product_icon_pc { background-color: #155DFC;}
.main_product_icon_server { background-color: #009688;}
.main_product_card_title { font-size: 24px; font-weight: 700; color: #1A1A1A; margin-bottom: 6px;}
.main_product_os_wrap { display: flex; gap: 16px;}
.main_product_os { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6B7280;}
.main_product_list { list-style: none; padding: 0; margin: 0;}
.main_product_list li { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 16px; color: #4A5565;}
.main_product_list li:last-child { margin-bottom: 0;}

/* ===== main_blog ===== */
.main_blog { background-color: #FFFFFF; padding: 100px 0;}
.main_blog .main_blog_header { text-align: center; margin-bottom: 50px;}
.main_blog .main_blog_title { font-size: 40px; font-weight: 700; color: #101828; margin-bottom: 12px;}
.main_blog .main_blog_subtitle { font-size: 20px; line-height: 1.5; color: #101828;}
.main_blog .main_blog_btn_wrap { text-align: center; margin-top: 60px;}
.main_blog .main_blog_btn { display: inline-flex; align-items: center; gap: 8px; background-color: #1A5EB2; color: #FFFFFF; padding: 13px 22px; border-radius: 10px; font-size: 16px; font-weight: 700; }
.main_blog .main_blog_btn:hover {background-color:#0E468C;}
.main_blog .main_blog_btn i { font-size: 12px;}
.main_blog .blog_wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px;}
.main_blog .blog_slide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; list-style: none; padding: 0; margin: 0;}
.main_blog .blog_slide li.item { background-color: #FFFFFF; border-radius: 20px; overflow: hidden; border: 1px solid #E5E7EB; padding: 23px;}
.main_blog .blog_slide li.item .img_wrap { aspect-ratio: 327 / 181;}
.main_blog .blog_slide li img { display: block; width: 100%; height: 100%; object-fit: cover;  border: 1px solid #F6F6F6; border-radius: 10px; }
.main_blog .blog_slide li .category { font-size: 14px; font-weight: 700; line-height: 1.7; color: #64748B; margin: 16px 0 8px 0;}
.main_blog .blog_slide li .title { font-size: 18px; font-weight: 700; color: #0A0A0A; }

/* ===== 반응형 스타일 ===== */
@media (max-width: 1024px) {
    .main_intro_card {
        gap: 40px;
        padding: 40px;
    }
    
    .main_intro_title,
    .main_why_title {
        font-size: 28px;
    }
    
    .main_why_grid {
        gap: 16px;
    }
    
    .main_why_card {
        padding: 24px 16px;
    }

    /* main_reason */
    .main_reason_grid { gap: 20px;}
    .main_reason_card { padding: 30px 20px;}
    .main_reason_title { font-size: 30px;}

    /* main_inquiry */
    .main_inquiry { padding: 80px 0;}
    .main_inquiry_title { font-size: 30px;}
    .main_inquiry_card { padding: 28px;}
}

@media (max-width: 768px) {
    .main_intro,
    .main_why,
    .main_reason,
    .main_blog,
    .main_inquiry {
        padding: 60px 20px;
    }
    
  
    
    .main_intro_card {
        flex-direction: column;
        gap: 30px;
        padding: 30px;
    }
    
    .main_intro_image,
    .main_intro_content {
        max-width: 100%;
    }
    
    .main_intro_title,
    .main_why_title,
    .main_reason_title,
    .main_blog_title {
        font-size: 24px;
        margin-bottom: 30px;
    }
    
    .main_intro_heading {
        font-size: 20px;
    }

    /* main_blog */
    .common_slide { grid-template-columns: repeat(2, 1fr);}
    .main_blog_header { margin-bottom: 40px;}
    .main_blog_btn_wrap { margin-top: 40px;}

}


@media (max-width: 640px) {
    .page_main section {padding: 40px 0;}

    /* main_visual */
    .main_visual {background-image: url(/wp-content/uploads/image/main/main_visual_mb.webp); background-position: center bottom; height: 550px;}
    .main_visual .main_visual_content { text-align: center; padding-top: 20px;}
    .main_visual .main_visual_subtitle { font-size: 16px; margin: 16px 0 30px 0; line-height: 1.4; color:#4A5565;}
    .main_visual .main_visual_btn { font-size:18px; padding: 13px 36px;}
    .main_visual .marker-title { font-size:30px; padding: 6px; letter-spacing: -1.3px;}

    .main_logo .main_logo_title { font-size: 24px; margin-bottom: 30px; }
    .main_logo .logo_slide_wrap ul li { padding-right: 30px}
    .main_logo .logo_slide_wrap ul li img  {height: 20px; width: auto;}

    .main_intro .main_intro_title  {font-size: 24px; margin-bottom: 30px;}
    .main_intro .main_intro_card {padding: 17px 14px; gap: 24px;}
    .main_intro .main_intro_subtitle { font-size: 17px; padding: 6px}
    .main_intro .main_intro_heading { font-size: 20px;}
    .main_intro .main_intro_desc { font-size: 15px; line-height: 1.4;}
    .main_intro .main_intro_btn { width: 100%; padding: 11px 0;}

    .main_why .main_why_title { font-size: 24px;}
    .main_why .main_why_subtitle { font-size: 14px; margin-bottom: 62px;}
    .main_why .main_why_container  {padding: 0 0 0 20px;}
    .main_why .main_why_wrapper {padding:0; box-shadow: none; border:none;}
    .main_why .main_why_badge { font-size: 14px; margin-left: 0;}
    .main_why .main_why_grid {display: block; margin-top: 20px;}
    .main_why .main_why_card {padding: 24px 16px;}
    .main_why .main_why_card_title {font-size: 18px;}
    .main_why .why_img {max-width: 100%;}
    .main_why .main_why_arrow img {width: 8px; height:27px;}
    .main_why .main_why_warning img {width: 30px; height: 30px;}
    .main_why .main_why_warning p {font-size: 14px;}
    .main_why .main_why_warning { padding: 12px 0; align-items: center; justify-content: center; }

    /* 모바일 공통 슬라이드 */
    .common_slide .slick-list {padding: 0 30px 20px 0;}
    .common_slide ul.slick-dots { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: 8px 0;}
    .common_slide ul.slick-dots li { width: 8px; height: 8px; background-color: #eaeaea; padding: 0; margin: 0 6px; font-size: 0; border-radius: 8px;}
    .common_slide ul.slick-dots li.slick-active { width: 24px; background-color:#2F6BF2;}

    /* main_reason */
    .main_reason .main_reason_header {margin-bottom: 30px;}
    .main_reason .main_reason_subtitle { font-size: 24px;}
    .main_reason .main_reason_title { font-size: 24px;}
    .main_reason .main_reason_card { padding: 14px 20px;}
    .main_reason .main_reason_icon {margin-bottom: 16px;}
    .main_reason .main_reason_icon img { width: 84px; height:84px;}
    .main_reason .main_reason_card_title { font-size: 18px;}
    .main_reason .main_reason_card_desc {line-height: 1.4;}
    .main_reason .main_reason_btn { width: 100%; justify-content: center; padding: 12px 0;}
    .main_reason .main_reason_grid { grid-template-columns:1fr; margin-bottom: 24px;}

    /* main_feature */
    .main_feature .main_feature_header { margin-bottom: 30px;}
    .main_feature .main_feature_title { font-size: 20px;}
    .main_feature .main_feature_subtitle { font-size: 14px;}
    .main_feature .main_feature_item_title { font-size: 18px;}
    .main_feature .main_feature_point { font-size: 12px;}
    .main_feature .main_feature_desc { font-size: 14px; margin-bottom: 16px;}
    .main_feature .main_feature_item {padding:0; gap:20px; flex-direction: column;  margin-bottom: 40px;}
    .main_feature .main_feature_image img { border-radius: 8px;}
    .main_feature .main_feature_link { font-size: 14px;}

    /* main_product */
    .main_product_grid { grid-template-columns: 1fr; gap: 20px;}
    .main_product .main_product_title { font-size: 24px; margin-bottom: 12px;}
    .main_product .main_product_subtitle { font-size: 16px;}
    .main_product .main_product_card_title { font-size: 18px;}
    .main_product_header {margin-bottom: 30px;}
    .main_product_card {padding: 24px;}
    .main_product_icon { width: 48px; height: 48px; margin-bottom: 18px;}
    .main_product_icon img {width: 29px; height:29px;}
    .main_product_card_header {margin-bottom: 20px;} 
    .main_product .main_product_list li { font-size: 14px;}

    /* main_blog */
    .main_blog .main_blog_header {margin-bottom: 30px;}
    .main_blog .main_blog_title { font-size: 24px; margin-bottom: 12px;}
    .main_blog .main_blog_subtitle { font-size: 16px; color: #4A5565;}
    .main_blog .main_blog_btn_wrap { margin-top: 30px;}
    .main_blog .main_blog_btn { width: 100%; max-width: 320px; justify-content: center; padding: 12px 22px;}
    .main_blog .blog_wrap {padding: 0 0 0 20px;}
    .main_blog .blog_slide { grid-template-columns: 1fr; gap: 0;}
    .main_blog .blog_slide li.item {margin: 0 10px; padding: 15px;}
    .main_blog .blog_slide li img {width: 100%;}

}

@media (max-width: 360px) {
    .main_why .main_why_badge {margin-left: 0;}
}