@charset "utf-8";

/* =========================== PAGE */
/* 공통 */
.pagecommon{position:relative;font-size:17px;letter-spacing:-.3px;line-height:1.8;color:#777}
.pagecommon .pl{white-space:pre-line}
.pagecommon *{word-break:keep-all}
.pagecommon .inner{max-width:1300px;margin:0 auto}

#promotion1001 .tit_area{margin-bottom:150px;text-align:center}
#promotion1001 .tit p{font-size:25px;font-weight:600;color:#111}
#promotion1001 .tit b{font-size:45px;font-weight:700;color:#00a092}
#promotion1001 .list{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:100px}
#promotion1001 .list li{padding-bottom:50px;border-radius:10px;background:#f3f6fd}
#promotion1001 .list li:nth-child(2){margin-top:80px}
#promotion1001 .list span{display:flex;align-items:center;justify-content:center;width:180px;height:50px;margin:-35px auto 0;border-radius:20px 30px 0 30px;font-size:20px;font-weight:700;color:#fff;background:#00a092}
#promotion1001 .list p{margin:30px 0;font-size:17px;font-weight:700;color:#111}

#promotion1001 .cont_area>div+div{margin-top:200px}
#promotion1001 .box:nth-child(odd){background-size: cover;}



#promotion1001 .box .inner{padding:150px 0}

#promotion1001 .cont{display:flex;justify-content:space-between}
#promotion1001 .l_cont p{font-size:35px;font-weight:700;line-height:1.3;color:#ffffff}
#promotion1001 .l_cont span{display:block;margin:25px 0;line-height:1.5}
#promotion1001 .l_cont a{display:inline-block;padding:15px 40px;border-radius:50px;font-weight:700;color:#fff;background:var(--primary);transition:all .3s}
#promotion1001 .l_cont a svg{margin-left:20px;vertical-align:-7px;transition:all .3s}
#promotion1001 .box_1 .l_cont{margin-top:100px}
#promotion1001 .box_1 .txt{background:#fff}
#promotion1001 .box_2 {background:url("../img/sub/promotion1001_bg2.jpg");}
#promotion1001 .box_2 .cont{flex-direction:row-reverse}
#promotion1001 .box_2 .l_cont{width:45%;margin-top:50px}
#promotion1001 .box_2 img{border-radius:10px}
#promotion1001 .box_2 .txt{background:#f3f6fd}

#promotion1001 .box_m{background:url("../img/sub/promotion1001_bg.jpg");}
#promotion1001 .box_m .cont{flex-direction:row-reverse}
#promotion1001 .box_m .l_cont{width:45%;margin-top:50px}
#promotion1001 .box_m img{border-radius:10px}
#promotion1001 .box_m .txt{background:#f3f6fd}

#promotion1001 .bnr{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;height:380px;background:url(../img/sub/promotion1001_img03.jpg)}
#promotion1001 .bnr p{width:100%;text-align:center;font-size:30px;font-weight:700;color:#fff}
#promotion1001 .bnr a{display:flex;align-items:center;margin-top:15px;padding:15px 40px;border-radius:50px;font-size:17px;font-weight:700;color:#fffefe;background:#fff;transition:all .3s}
#promotion1001 .bnr a svg{width:20px;margin-left:15px}



#promotion1001 .cont_area-top {
    margin-bottom: 50px;
}



#promotion1001 .cir_area ul{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

#promotion1001 .cir_area ul li{
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    width:280px;
    height:280px;
    border-radius:50%;
    font-size:17px;
    font-weight:700;
    line-height:1.5;
    text-align:center;
}

#promotion1001 .cir_area ul li+li{
    margin-left:-40px;
}

#promotion1001 .cir_area ul li:first-child{
    color:#fff;
    background:#434dfe;
}

#promotion1001 .cir_area ul li:last-child{
    border:1px solid #434dfe;
    color:#434dfe;
    background:#fff;
}

#promotion1001 .cir_area .tit p{
    margin-top:30px;
    font-size:35px;
    font-weight:700;
    line-height:1.4;
    color:#111;
}
/* promotion1001 cir 영역 가운데 정렬 */
#promotion1001 .cir_area{
    text-align:center;
}

/* cir_area에서는 m_inner 왼쪽 패딩 제거 */
#promotion1001 .cir_area.m_inner{
    padding-left:0 !important;
}

/* 샘플 전문지식 타이틀 위·아래 간격 조정 */
#promotion1001 .cir_area .tit p{
    margin-top: 0;        /* 위쪽 여백 제거 (필요 없으면 0) */
    margin-bottom: 10px;   /* 아래쪽 여백을 작게 */
}

#promotion1001 .cir_area .tit span{
    display: block;       /* 줄바꿈 명확하게 */
    margin-top: 0;        /* span 위쪽 여백 제거 */
    margin-bottom: 50px;        /* span 위쪽 여백 제거 */
    font-weight: 600; 
}


/* 섹션 타이틀 */
#promotion1001 .tit.c_txt{
    text-align:center;
    margin-bottom:60px;
}

#promotion1001 .tit.c_txt span{
    display:block;
    font-size:15px;
    font-weight:600;
    color:var(--primary);
    text-transform:uppercase;
    letter-spacing:0.08em;
}

#promotion1001 .tit.c_txt p{
    margin-top:15px;
    font-size:30px;
    font-weight:700;
    line-height:1.4;
    color:#111;
}

/* 슬라이드 영역 전체 */
#promotion1001 .slide_area{
    position:relative;
}

/* 슬라이드 컨테이너 */
#promotion1001 .slide_area .subSlide{
    max-width:1100px;
    margin:0 auto;
}

/* 각 슬라이드 카드 */
#promotion1001 .slide_area .swiper-slide{
    overflow:hidden;
    border-radius:12px;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* 슬라이드 이미지 */
#promotion1001 .slide_area .swiper-slide img{
    display:block;
    width:100%;
    height:auto;
}

/* 슬라이드 안 텍스트 */
#promotion1001 .slide_area .swiper-slide .s_txt{
    padding:18px 22px 22px;
}

#promotion1001 .slide_area .swiper-slide .s_txt span{
    display:inline-block;
    margin-bottom:6px;
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    color:var(--primary);
}

#promotion1001 .slide_area .swiper-slide .s_txt p{
    font-size:18px;
    font-weight:700;
    color:#111;
}

/* 좌우 버튼 래퍼 */
#promotion1001 .slide_area .control{
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    transform:translateY(-50%);
    pointer-events:none; /* 버튼만 클릭되게 */
}

/* 버튼 공통 스타일 */
#promotion1001 .slide_area .control button{
    pointer-events:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    border-radius:50%;
    border:1px solid #e1e1e1;
    background:#fff;
    box-shadow:0 6px 15px rgba(0,0,0,0.06);
    transition:box-shadow .2s, transform .2s;
}

/* ===== 상단 로고 + 앵커 메뉴 ===== */
#promotion1001 .promo-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255,0);
    height: 64px;
    /*border-bottom: 1px solid #e5e5e5;*/
  }
  
  #promotion1001 .promo-header-inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 10px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }
  
  #promotion1001 .promo-logo img {
    display: block;
    height: 50px;
  }
  
  #promotion1001 .promo-gnb {
    display: flex;
    gap: 16px;
    font-size: 16px;
    padding: 10px;
  }
  
  #promotion1001 .promo-gnb a {
    position: relative;
    padding: 4px 0;
    font-weight: 500;
    color: #222;
    text-decoration: none;
  }
  
  #promotion1001 .promo-gnb a:hover {
    color: #00a092;
  }
  
  #promotion1001 .promo-gnb a.active {
    color: #00a092;
  }
  



  #promotion1001 .promo-logo {
    width: 200px;      /* 필요시 조정 */
    height: 0px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  
  #promotion1001 .promo-logo img {
    display: block;
  }
  
  /* 기본은 PC 로고만 노출 */
  #promotion1001 .promo-logo .logo-pc {
    width: 100%;
    height: auto;
  }
  
  #promotion1001 .promo-logo .logo-m {
    display: none;
  }
  
/*main*/
#main {background:url("./img/sub/promotion_bg.jpg");background-size: cover;}
#main > .container > .tit {padding-top: 200px;}
#main > .container > .img {padding-top:150px;padding-bottom: 80px;}
#main > .container > .text {font-size: 20px;font-weight: 300;}



  /* 반응형 조정 */
  @media (max-width: 768px) {
    #promotion1001 .promo-header-inner {
      padding: 8px 0px;
    }
  
    /*#promotion1001 .promo-logo img {
      height: 24px;
    }*/
  
    #promotion1001 .promo-gnb {
      gap: 12px;
      font-size: 14px;
    }
  }
  
  @media (max-width: 480px) {
    #promotion1001 .promo-header-inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
  }
  




/* 호버 효과 (PC) */
@media (hover:hover){
    #promotion1001 .slide_area .control button:hover{
        transform:translateY(-2px);
        box-shadow:0 10px 20px rgba(0,0,0,0.1);
    }
}

/* 아이콘 크기 */
#promotion1001 .slide_area .control button svg{
    width:22px;
    height:22px;
}




@media(hover:hover){
#promotion1001 .l_cont a:hover{background:#111}
#promotion1001 .l_cont a:hover svg{margin-left:30px}
#promotion1001 .bnr a:hover{padding:15px 45px}
}

@media(max-width:1024px){
.pagecommon{font-size:15px}
#promotion1001 .tit_area{margin-bottom:110px}
#promotion1001 .tit p{font-size:20px}
#promotion1001 .list{gap:20px;margin-top:50px;padding:0 20px}
#promotion1001 .list p{font-size:16px}
#promotion1001 .cont_area>div+div{margin-top:100px}
#promotion1001 .cont_area .pl{white-space:normal}
#promotion1001 .l_cont{margin-bottom:30px}
#promotion1001 .l_cont p{font-size:27px}
#promotion1001 .box_1 .l_cont{margin-top:0}
#promotion1001 .box_2 .l_cont{width:100%;margin-top:0}
/*#promotion1001 .box img{width:80%}*/
#promotion1001 .cont{display:flex;text-align:center; justify-content:center;}
#promotion1001 .txt{width:90%;margin:60px auto 0;padding:50px}



#promotion1001 .bnr{height:285px}
#promotion1001 .bnr p{font-size:22px}
#promotion1001 .bnr a{padding:15px 40px;font-size:15px}
}


#promotion1001 .slide_area .subSlide{width:1100px;margin:0 auto}
#promotion1001 .slide_area .subSlide img{width:100%}
#promotion1001 .slide_area li{position:relative}
#promotion1001 .slide_area .s_txt{position:absolute;bottom:-80px;right:40px;text-align:right;color:#fff;transition:all .3s}
#promotion1001 .slide_area .s_txt span{font-size:13px;font-weight:700;letter-spacing:0;text-transform:uppercase;font-family:'Poppins'}
#promotion1001 .slide_area .s_txt p{font-size:20px;font-weight:500}
#promotion1001 .slide_area .control{position:absolute;display:flex;justify-content:space-between;top:50%;left:0;width:100%;transform:translateY(-50%)}
#promotion1001 .slide_area button{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50px;border:1px solid #e1e1e1;background:none;transition:all .3s}





@media(max-width:768px){
#promotion1001 .list{display:flex;flex-wrap:wrap;justify-content:center;margin-top:80px}
#promotion1001 .list li{width:48%}
#promotion1001 .list li:nth-child(2){margin-top:0}
#promotion1001 .list li:nth-child(3){margin-top:30px}
#promotion1001 .list span{width:130px;height:55px;font-size:15px}
#promotion1001 .l_cont p{font-size:22px;font-weight:500;line-height:1.3;color:#ffffff}
#promotion1001 .cont{display:flex;text-align:center; justify-content:center;}


#promotion1001 .txt dl{gap:40px}
}
@media(max-width:540px){
    #promotion1001 .tit p{font-size:18px}
    #promotion1001 .tit b{font-size:30px}
    
    #promotion1001 .list li{width:100%}
    #promotion1001 .list li+li{margin-top:35px !important}
    #promotion1001 .cont_area>div+div{margin-top:75px}
    #promotion1001 .box{padding:0 10px}
    #promotion1001 .box .inner{padding:80px 0}
    #promotion1001 .box img{width:100%}
    #promotion1001 .txt{width:100%;margin:40px auto 0;padding:30px}
    #promotion1001 .txt dl dt{padding-left:20px}
    #promotion1001 .bnr{height:235px}
    #promotion1001 .bnr p{font-size:19px}
}
@media(max-width:380px){
#promotion1001 .box .inner{padding:70px 0}
#promotion1001 .tit p{font-size:5px}
#promotion1001 .list p{margin:20px 0 15px;font-size:17px}
#promotion1001 .list li img{width:100px}
#promotion1001 .cont_area>div+div{margin-top:55px}

#promotion1001 .l_cont p{font-size:20px}
#promotion1001 .txt dl{display:block}
#promotion1001 .bnr a{padding:10px 40px}
}




@media(max-width:1300px){
    #promotion1001 .cir_area p{
        margin-bottom:80px;
        font-size:17px;
    }
    #promotion1001 .cir_area ul{
        display:flex;
    }
    #promotion1001 .cir_area ul li{
        width:250px;
        height:250px;
    }
}

@media(max-width:768px){
    #promotion1001 .cir_area ul li{
        width:230px;
        height:230px;
    }
    #promotion1001 .cir_area ul li:nth-child(2){
        display:none;
    }
}

@media(max-width:580px){
    #promotion1001 .cir_area ul li:nth-child(3){
        display:none;
    }
}

@media(max-width:380px){
    #promotion1001 .cir_area ul{
        display:block;
        margin:0 10px;
    }
    #promotion1001 .cir_area ul li{
        width:100%;
        height:auto;
        padding:25px 0;
        border-radius:10px;
        white-space:normal;
    }
    #promotion1001 .cir_area ul li+li{
        margin-left:0;
    }
  
}
@media(max-width:1024px){
    #promotion1001 .slide_area .subSlide{
        max-width:90%;
    }
    #promotion1001 .slide_area .control button{
        width:52px;
        height:52px;
    }
}

@media(max-width:768px){
    #promotion1001 .slide_area .subSlide{
        max-width:100%;
    }
    #promotion1001 .slide_area .swiper-slide{
        box-shadow:0 6px 15px rgba(0,0,0,0.06);
    }
    #promotion1001 .slide_area .control{
        top:auto;
        bottom:-30px;
        transform:none;
        justify-content:center;
        gap:12px;
    }
}

@media(max-width:480px){
    #promotion1001 .tit.c_txt p{
        font-size:24px;
    }
    #promotion1001 .slide_area .swiper-slide .s_txt p{
        font-size:16px;
    }
}
@media(hover:hover){
    #promotion1001 .slide_area button:hover{border:1px solid #111}
    #promotion1001 .slide_area li:hover .s_txt{bottom:40px}
    }


    @media(max-width:1024px){
     
        #promotion1001 .slide_area .subSlide{width:100%}
        #promotion1001 .slide_area .s_txt{bottom:40px}
        #promotion1001 .slide_area .control{position:unset;justify-content:center;gap:10px;margin-top:20px;transform:none}}


        @media(max-width:480px){
       
            #promotion1001 .slide_area button{width:50px;height:50px}
            #promotion1001 .slide_area .s_txt p{font-size:16px}} 

            /* 768px 이하: 모바일용 심볼 로고로 전환 */
@media (max-width: 768px) {
    #promotion1001 .promo-header-inner {
      padding: 8px 0;
    }
  
  
    #promotion1001 .promo-logo .logo-pc {
      display: none;
    }
  
    #promotion1001 .promo-logo .logo-m {
      display: block;
      width: 100%;
      height: auto;
      padding-left: 20px; /* 왼쪽 패딩값 추가 (원하는 값으로 수정) */


    }
  }