@charset "utf-8";

/* 상하단 레이아웃 공통 */
body{width: 100%; min-width:320px; overflow-x:hidden;}
#container{max-width: 1320px; margin: 0 auto; box-sizing: border-box;}

/* [수정] 상단 헤더: 회사소개/서비스안내 메뉴 정렬을 위해 flex 구조 적용 */
header {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 30px 0; 
    background: #fff; 
    border-bottom: 1px solid #e2e8f0;
}
.nav_links { 
    display: flex; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}
.nav_links li { 
    margin-left: 25px; 
}
.nav_links li a { 
    font-size: 15px; 
    font-weight: 500; 
    color: #4a5568; 
    text-decoration: none; 
}
.nav_links li a:hover { 
    color: #b4102b; /* 메인 테마색과 톤 매칭 */
}

/* [수정] 본문: 푸터와 겹치거나 답답하게 붙지 않도록 하단 마진 80px 확보 */
.content {
    margin-bottom: 80px !important;
}
.content h2{padding: 75px 0 50px; font-size: 40px; text-align: center;}

/* [수정] 하단 푸터: 본문 다크 카드 이미지와 완벽히 이어지는 딥 차콜 블랙으로 전면 리뉴얼 */
footer {
    background-color: #1a1c1e !important; 
    color: #94a3b8; 
    padding: 60px 40px !important; 
    font-size: 13px; 
    text-align: left !important; /* 가운데 정렬에서 좌측 정렬로 신뢰도 정돈 */
    line-height: 1.9; 
    border-top: 1px solid #2d3135;
    clear: both;
}
.footer_container { 
    max-width: 1200px; 
    margin: 0 auto; 
}
/* 법적 필수 문서 레이아웃 */
.footer_laws { 
    margin-bottom: 22px; 
    padding-bottom: 14px; 
    border-bottom: 1px solid #2d3135; 
}
.footer_laws a { 
    font-weight: 500; 
    color: #e2e8f0; 
    text-decoration: none; 
    margin-right: 30px; 
    font-size: 14px; 
}
.footer_laws a.privacy_policy { 
    color: #38bdf8; /* 구글 보안 봇 크롤링 및 식별용 스카이블루 */
    font-weight: bold; 
}
.footer_laws a:hover { 
    text-decoration: underline; 
    color: #fff;
}
/* 기업 박제 정보 텍스트 */
.footer_company_text { 
    color: #94a3b8; 
}
.footer_company_text span { 
    margin-right: 20px; 
    display: inline-block; 
}
.footer_copyright { 
    margin-top: 20px; 
    color: #64748b; 
    font-size: 12px; 
}

/* 컨텐츠 본문 스타일 */
.tab_wrap .tab{display: table; table-layout: fixed; width: 100%; padding: 0 0 18px; border-bottom: 1px solid #DCDCDC;}
.tab_wrap .tab li{display: table-cell; text-align: center;}
.tab_wrap h3 button{position:relative; padding: 0 32px; font-size: 26px; color: #999;}
.tab_wrap h3 button:before{visibility: hidden; opacity: 0; content: ''; position: absolute; bottom: -19px; left: 0; width: 0; height: 3px; background: #d60e3b; transition: .3s;}
.tab_wrap li.on h3 button{font-weight: 700; color: #d60e3b;}
.tab_wrap li.on h3 button:before,
.tab_wrap li h3 button:hover:before{visibility: visible; opacity: 1; width: 100%;}

.tab_con{padding: 50px 0 0;}
.tab_con .con ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.tab_con .con ul li{overflow: hidden; position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 49.3%; box-sizing: border-box; padding: 27px 40px; border-radius: 25px; background: url(../images/bg_pc1.jpg) no-repeat center; color: #fff;}
.tab_con .con ul li:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45);}
.tab_con .con ul li:nth-child(2){background-image: url(../images/bg_pc2.jpg);}
.tab_con .con ul li:last-child{width: 100%; margin: 20px 0 0; padding: 60px 40px 70px; background-image: url(../images/bg_pc3.jpg);}

.tab_con .con ul li p{z-index: 1; position: relative; font-weight: 700; font-size: 30px; word-break: keep-all;}
.tab_con .con ul li a{z-index: 1; position: relative; display: block; color: #fff; word-break: keep-all;}

.tab_con .con ul li .btn_group {
    display: flex !important;
    flex-direction: column !important;     /* 버튼을 위아래(2열)로 배치 */
    flex-grow: 1 !important;               /* 우측 남은 공간을 버튼 그룹이 모두 차지 */
    max-width: 70% !important;             /* (선택) 버튼 그룹의 최대 가로 넓이 제한 */
}

.tab_con .con ul li .btn_down_and + .btn_down_and {
    margin-top: 15px !important; /* 버튼 사이의 간격 (원하시는 대로 10px~20px 조절 가능) */
}

.tab_con .con ul li .btn_group .link{padding: 8px 0 0; color: #FF7300 !important; font-size: 18px;}
.tit_wrap .link:after{content: ''; display: inline-block; width: 10px; height: 10px; margin: 0 0 0 5px; border-top: 1px solid #FF7300; border-right: 1px solid #FF7300; transform: rotate(45deg);}

/* 기사용 앱 등 다운로드 카드 내 기본 보안 안내문구 스타일 */
.tab_con .con ul li .notice_text {
    position: relative !important;
    z-index: 2 !important;
    display: inline-block !important;
    margin-top: 20px !important;
    color: #38bdf8 !important;
    font-size: 15px !important;
    font-weight: normal !important;
    word-break: keep-all; /* 모바일에서 글자가 어색하게 깨지는 현상 방지 */
}

/* 기사용 앱 등 다운로드 카드 내 기본 보안 안내문구 스타일 (우측 정렬 반영) */
.tab_con .con ul li .notice_text_r {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;       /* [수정] inline-block에서 block으로 변경하여 가로 폭을 100% 꽉 채움 */
    width: 100% !important;          /* [추가] 부모 박스 안에서 오른쪽 끝까지 공간을 확보 */
    text-align: center !important;    /* [추가] 글자들을 오른쪽 끝으로 정렬 */
    margin-top: 20px !important;
    color: #38bdf8 !important;
    font-size: 15px !important;
    font-weight: normal !important;
    word-break: keep-all;
}

.tab_con .btn_down{width: 350px; box-sizing: border-box; border: 1px solid #fff; padding: 23px 70px 23px 25px; border-radius: 12px; background: url(../images/ico_down.png) no-repeat right 25px center; transition: .3s;}
.tab_con .btn_down:hover{border-color: #FF7300; background-color: #FF7300;}
.tab_con .btn_down_and {
    display: inline-flex;       /* 내부 문구들을 세로 배열하기 위해 Flex 적용 */
    flex-direction: column;     /* 위에서 아래로 떨어지도록 설정 */
    justify-content: center;
    align-items: flex-start;    /* 왼쪽 정렬 기준 */
    width: 350px; 
    box-sizing: border-box; 
    border: 1px solid #fff; 
    padding: 18px 70px 18px 25px; /* 두 줄이 되므로 상하 패딩을 기존 23px에서 18px로 살짝 줄여 균형 확보 */
    border-radius: 12px; 
    background: url(../images/ico_down.png) no-repeat right 25px center; 
    transition: .3s;
    text-decoration: none;      /* 밑줄 방지 */
    color: #fff;
}
/* 버튼 내 메인 타이틀 */
.tab_con .btn_down_and strong {
    font-size: 18px;            /* 기존 화면 분할 타이틀 크기 유지 (필요시 조절 가능) */
    font-weight: 700;
    line-height: 1.3;
}
.tab_con .btn_down_and .btn_sub_text {
    display: block;
    margin-top: 6px;  
    font-size: 12px;            /* 크기 */
    font-weight: normal;        /* 가독성을 위해 두께를 얇게 처리 */
    color: #38bdf8;             /* 기본 상태에서 눈이 피로하지 않은 차분한 연회색 */
    opacity: 0.85;
    transition: .3s;
}
.tab_con .btn_down_and:hover {
    border-color: #FF7300; 
    background-color: #FF7300;
}
/* 호버 시 서브 텍스트도 흰색으로 선명하게 변화 */
.tab_con .btn_down_and:hover .btn_sub_text {
    color: #fff;
    opacity: 1;
}

/* 첫 번째 li(기사용 앱 카드)를 한 줄에 혼자 100% 다 쓰도록 강제 전환 */
.tab_con .con ul li.full_width {
    width: 100% !important;
    margin-bottom: 20px !important; /* 아래 카드와의 간격 벌림 */
}

/* 카드 안의 다운로드 버튼(a 태그)이 카드 가로 폭 전체를 차지하도록 설정 */
.tab_con .con ul li.full_width .btn_down_and {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important; /* 버튼 내부 텍스트들을 가운데 정렬 */
    padding: 20px 0 !important;   /* 버튼을 위아래로 도톰하고 누르기 편하게 확장 */
    background-color: rgba(2, 132, 199, 0.8) !important; /* 모바일용 푸른빛 포인트 배경 (선택사항) */
    border-radius: 12px !important;
    text-decoration: none !important;
}

/* 버튼 내부의 강한 볼드 텍스트 크기 조절 */
.tab_con .con ul li.full_width .btn_down_and strong {
    display: block !important;
    font-size: 22px !important;
    color: #fff !important;
    margin-bottom: 5px;
}

/* 버튼 밑에 붙는 안전 안내 문구를 가로 중앙에 예쁘게 배치 */
.tab_con .con ul li.full_width .btn_sub_text {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    color: #38bdf8 !important;
    font-size: 15px !important;
    font-weight: normal !important;
}

.tit_wrap .link{padding: 8px 0 0; color: #FF7300 !important; font-size: 18px;}
.tit_wrap .link:after{content: ''; display: inline-block; width: 10px; height: 10px; margin: 0 0 0 5px; border-top: 1px solid #FF7300; border-right: 1px solid #FF7300; transform: rotate(45deg);}
.tab_con .down_wrap{display: flex;}
.tab_con .btn_down +.btn_down_and{margin: 0 0 0 25px;}
.tab_con .btn_down +.btn_down{margin: 0 0 0 25px;}

/* 공용프로그램 */
.tab_con .con.common ul li{display: block; width: 32.4%; height: 260px; margin: 0; padding: 27px 38px 27px; background-image: url(../images/bg_pc4.jpg); background-position: right center;}
.tab_con .con.common ul li:nth-child(2){background-image: url(../images/bg_pc5.jpg);}
.tab_con .con.common ul li:last-child{background-image: url(../images/bg_pc6.jpg);}
.tab_con .con.common ul li p{padding: 0 0 30px;}
.tab_con .con.common .btn_down{width: 100%;}


/* ==========================================================================
   [기사용 앱 카드 및 안내 박스 전용 스타일]
   ========================================================================== */

/* 1. 카드 내부 여백 및 박스 계산 설정 */
.tab_con .con ul li.app_card {
    padding: 25px 30px !important;
    box-sizing: border-box !important;
}

/* 2. 상단 레이아웃 (타이틀 + 버튼 그룹 2단 배치) */
.tab_con .con ul li.app_card .card_top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* 3. 좌측 타이틀 */
.tab_con .con ul li.app_card .card_top .tit {
    margin: 0 !important;
    padding-right: 15px !important;
    flex-shrink: 0 !important;
}

/* 4. 우측 버튼 그룹 컨테이너 */
.tab_con .con ul li.app_card .btn_group {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    max-width: 70% !important;
}

/* 5. 버튼 공통 및 개별 색상 설정 */
.tab_con .con ul li.app_card .btn_group .btn_down_and {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

.tab_con .con ul li.app_card .btn_group .btn_down_and + .btn_down_and {
    margin-top: 10px !important; /* 버튼 간 상단 여백 */
}

.tab_con .con ul li.app_card .txt_yellow {
    color: #facc15 !important; /* 멀티 CID 메뉴얼 황금 노란색 */
}

.tab_con .con ul li.app_card .txt_red {
    color: #ef4444 !important; /* 멀티 CID 베타버전 강렬한 빨간색 */
}

/* [하단 100% 영역] 멀티 CID 베타버전 안내 박스 스타일 */
.tab_con .con ul li.app_card .beta_notice_box {
    margin-top: 16px;
    padding: 14px 16px !important;            /* ★ 상하 여백 14px로 동일하게 고정 ★ */
    background-color: rgba(15, 23, 42, 0.85); /* 시인성을 높이는 진한 어두운 바탕 */
    border: 1.5px solid #facc15;              /* 노란색 강조 테두리 */
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.2);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    word-break: keep-all;                     /* 반응형 단어 단위 줄바꿈 */
    line-height: 1.5;
}

.tab_con .con ul li.app_card .beta_notice_box .notice_title {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 5px 0 !important;             /* 제목 하단 간격 5px */
    color: #facc15 !important;
    letter-spacing: -0.5px;
}

.tab_con .con ul li.app_card .beta_notice_box .notice_desc {
    margin: 0 !important;                     /* ★ p 태그의 하단 기본 마진(margin-bottom) 완전 제거 ★ */
    padding: 0 !important;
    font-size: 13px;
    font-weight: 400;
    color: #ffffff !important;
    word-break: keep-all;
}

.tab_con .con ul li.app_card .beta_notice_box .notice_highlight {
    color: #facc15;
    font-weight: bold;
}

/* ==========================================================================	
   반응형 미디어 쿼리 구간 유지 및 리뉴얼 스타일 최적화
   ========================================================================== */
@media all and (max-width:1380px) {
    #container{padding: 0 30px;}
    .tab_con .con ul li:not(:last-child) p{width: 100%; padding: 0 0 8%;}
	/* [수정] 1380px 이하 모바일 환경에서 카드 상단을 세로 1열 구조로 전환하여 버튼 짤림 방지 */
    .tab_con .con ul li.app_card .card_top {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
    }
	/* 모바일에서는 버튼 그룹이 전체 가로 폭 100% 사용 */
    .tab_con .con ul li.app_card .btn_group {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media all and (max-width:1200px) {
    .tit_wrap{display: flex; align-items: baseline; width: 100%; padding: 0 0 30px;}
    .tit_wrap .link{padding: 0 0 0 10px;}
}

@media all and (max-width:992px) {
    .tab_con .btn_down{width: 100%; margin: 0 !important;}
    .tab_con .btn_down.pc{display: none;}
    .tab_con .down_wrap.pc{display: none;}
	.tab_con .btn_down_and{width: 100% !important; margin: 0 !important; box-sizing: border-box !important;}
}

@media all and (max-width:768px) {
    .content h2 span,
    .tab_wrap .tab li:last-child,
    .tit_wrap .link span,
    .tab_con .con.common{display: none;}

    .tab_con .con ul li{display: block; width: 100%; height: auto !important;} /* 높이 자동 확장 */
    .tab_con .con ul li + li{margin: 24px 0 0;}

    /* 모바일에서는 타이틀 하단 여백 부여 */
    .tab_con .con ul li.app_card .card_top .tit {
        padding-right: 0 !important;
        padding-bottom: 15px !important;
    }

    /* 모바일 환경 헤더/푸터 패딩 조절 */
    header { padding: 20px 0; }
    footer { padding: 40px 20px !important; }
}

@media all and (max-width:500px) {
    /* 모바일 환경에서 헤더 로고와 메뉴 세로 정렬 */
    header{padding: 25px 0; flex-direction: column; text-align: center; gap: 15px;}
    .nav_links li { margin: 0 12px; }
    #logo img{width: 147px;}
    
    /* 푸터 레이아웃 유지 */
    footer{padding: 40px 20px !important; font-size: 12px;}
    .footer_laws a { margin-right: 15px; font-size: 13px; }
    
    .content h2{padding: 28px 0; font-size: 28px;}
    .tab_wrap .tab{padding: 0 0 10px;}
    .tab_wrap h3 button{font-size: 20px;}
    .tab_wrap h3 button:before{bottom: -11px;}

    .tab_con{padding: 30px 0 0;}
    
    /* [수정] 패딩 및 높이 자동 계산으로 텍스트/버튼이 늘어나도 안 가려지게 처리 */
    .tab_con .con ul li{
        padding: 25px 20px !important; 
        height: auto !important;
        box-sizing: border-box !important;
    }
    .tab_con .con ul li:nth-child(2){order: 3; background-image: url(../images/bg_m3.jpg);}
    .tab_con .con ul li:last-child{order: 2; background-image: url(../images/bg_m2.jpg);}

    /* [수정] card_top 내부의 p.tit 패딩 간섭 제거 (기존 p {padding-bottom: 36px}와 충돌 방지) */
    .tab_con .con ul li.app_card .card_top p.tit {
        padding: 0 0 12px !important;
        font-size: 22px !important;
    }

    .tab_con .btn_down{padding: 19px 60px 19px 16px; background-size: 20px; background-position: right 20px center;}
    
    .tit_wrap{justify-content: space-between; padding: 0 0 8%;}
    .tit_wrap .link{padding: 0; font-size: 16px;}

    /* 모바일 폭에 맞게 하단 안내 박스 패딩 상하 12px 동일 적용 */
    .tab_con .con ul li.app_card .beta_notice_box {
        padding: 12px 14px !important;         /* ★ 모바일 상하 여백 12px 동일 ★ */
        margin-top: 12px !important;
    }
    .tab_con .con ul li.app_card .beta_notice_box .notice_desc {
        font-size: 12.5px !important;
    }
	
}

@media all and (max-width:380px) {  
    #logo img{width: 120px;}
    .content h2{font-size: 23px;}
    .tab_wrap h3 button{padding: 0 20px; font-size: 18px;}

    .tit_wrap{display: block;}
    .tab_con .con ul li{padding: 20px 15px !important;}
    .tab_con .con ul li.app_card .card_top p.tit{font-size: 20px !important;}

    .tit_wrap .link{padding: 8px 0 0; font-size: 18px;}
    .tit_wrap .link:after{width: 8px; height: 15px;}
}