@charset "utf-8";

/* 공통 */
@font-face {
    font-family: 'Pretendard';
    src: url(../font/Pretendard-Regular.woff) format(woff);
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url(../font/Pretendard-Medium.woff) format(woff);
    font-weight: 500;
}
@font-face {
    font-family: 'Pretendard';
    src: url(../font/Pretendard-Bold.woff) format(woff);
    font-weight: 700;
}


:root {
    /* color */
    --bg : #EFF0F1;
    --bg-blue : #E0E5F2;

    --gray-50 : #F8F8F8;
    --gray-100 : #F1F1F1;
    --gray-200 : #E7E7E7;
    --gray-300 : #D7D7D7;
    --gray-400 : #B3B3B3;
    --gray-500 : #939393;
    --gray-600 : #6B6B6B;
    --gray-700 : #575757;
    --gray-800 : #393939;
    --gray-900 : #191919;

    --p-100 : #B4EAFB;
    --p-200 : #B5CDFE;
    
    --r-200 : #FFBCAD;

    --pri_color : #4774FB;
    --sub_color : #0ABBE6;
    --navy : #273267;
    --red : #FF3243;
    --orange : #EA9960;

    /* 그라데이션 */
    --linear : linear-gradient(60deg, #15264C, #495E8C);
    --linearDark : linear-gradient(60deg, #15264C, #162D5E);

    /* Shadow */
    --boxShadow : 0 0 8px rgba(0, 0, 0, .1);

    /* font weight */
    --medium : 500;
}


html, body {font-family: 'Pretendard', 'Noto Sans', sans-serif; font-size: 16px; background: var(--bg); scroll-behavior: smooth;}
* {margin: 0; padding: 0; list-style: none; font-family: 'Pretendard', 'Noto Sans', sans-serif; letter-spacing: -0.01875em;}
label, button, summary {cursor: pointer;}
img, input {display: block;}
.screen_out {display: none;}


/* 준비중 섹션 */
.ready {text-align: center; height: calc(100vh - 245px); box-sizing: border-box;}
.ready img {text-align: center; margin: auto; margin-bottom: 20px;}
.ready p {margin-top: 10px;}

/* 컨테이너 1440 */
.container {max-width: 1440px; margin: auto; overflow: hidden;}
/* 컨테이너 1440 space-between */
.container_sb {width: 1440px; height: 100%; margin: auto; display: flex; justify-content: space-between; align-items: center; padding: 0 24px;}
/* 컨테이너 꽉차게 */
.container_fill {margin: auto; overflow: hidden;}

/* 글자색 다른거 */
.text_pri {color: var(--pri_color);}
.text_oran {color: var(--orange);}

/* 이미지 레디우스 */
.img_radius {border-radius: 6px;}
/* 이미지 배경 */
.img_warp {width: 100%; background: #fff; border-radius: 6px; margin: auto; }

/* 문장 통채로 내려가게 */
.space_nwrap {white-space: nowrap;}

/* 1120에 보일거 */
.mob_only {display: none;}
/* 900에 보일거 */
.mob_only_re {display: none;}
/* 500에 보일거 */
.mob_only_500 {display: none;}

/* 본문 바로가기 */
.skip-link {position: absolute; top: -40px; left: 0; background: var(--pri_color); color: #fff; width: 100%; text-align: center; padding: 4px 0; z-index: 1999;}
.skip-link:focus {top: 0;}

/* 헤더 */
header {height: 70px; display: flex; justify-content: center; position: fixed; width: 100%; background: #fff; z-index: 999; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);}
header.header-collapse {background: #fff; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);}

#hd_logo {height: 40px; outline-offset: 5px;}

header nav ul {display: flex; gap: 0 50px; align-items: center; width: 100%;}
header nav {display: flex; height: 100%;}
header nav ul a {display: block; width: 100%; height: 100%; text-decoration: none; color: var(--gray-900); font-size: 18px; font-weight: bold; padding: 20px 0; box-sizing: border-box;}
  /* 헤더 켜진 페이지 on */
header nav ul a.on {color: var(--pri_color);}
  /* 메뉴 버튼 */
header button {text-indent: -9999px; overflow: hidden; border: none; background: url(../img/menu.png) center / 24px no-repeat; width: 40px; height: 100%; display: none;}


/* 모바일 메뉴버튼 누르면 x 버튼 */
header #menu.on {background-image: url(../img/close.png);}

  /* 모바일 타임솔루션 a 태그 */
header #ts_bt_mob {display: none;}

  /* 타임솔루션 a 태그 디자인 */
header .ts_bt {text-decoration: none; font-weight: var(--medium); color: var(--gray-700); padding: 6px 40px 8px 20px; position: relative; border: 1px solid var(--gray-700); border-radius: 25px; outline-offset: 5px;}
header .ts_bt:hover {background-color: var(--gray-100);}
header .ts_bt::after {content: ""; width: 20px; height: 20px; background: url(../img/link.png) center; position: absolute; right: 12px;}


/* 푸터 */
footer {background: #fff; width: 100%; display: flex; justify-content: center; border-top: 1px solid var(--bg);}

  /* 푸터 컨테이너에 추가 */
footer .container_sb {padding: 40px 24px 65px; align-items: flex-start;}
  /* 로고 */
footer #footer_logo {margin-right: 5.375rem;}
  /* 로고 제외 나머지 묶음 */
footer #footer_con {width: 100%;} 

footer #footer_top {display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--gray-200); padding-bottom: 10px;}
footer #footer_top a {color: var(--gray-900); text-decoration: none;}

  /* 패밀리사이트 summary */
#family-site {width: 170px; padding: 10px; padding-right: 70px; box-sizing: border-box; position: relative; border-radius: 2px; border: 1px solid transparent;}
details:open #family-site {border: 1px solid var(--gray-200);}
#family-site span {width: 6px; height: 6px; border-left: 2px solid var(--gray-900); border-bottom: 2px solid var(--gray-900); border-bottom-left-radius: 1px; position: absolute; top: 14px; right: 20px; transform: rotate(-45deg);}
details[open] #family-site span {rotate: 180deg;  top: 16px;}

  /* 리스트 ul */
#f_site_list {position: absolute; margin-top: -187px; background: #fff; border: 1px solid var(--gray-300); border-radius: 4px;}
#f_site_list a {display: block; padding: 14px 0 14px 20px; width: 170px; box-sizing: border-box;}
#f_site_list a:hover {background: var(--gray-50);}


footer #footer_bottom {display: flex; justify-content: space-between; color: var(--gray-500); margin-top: 20px;}
footer #footer_bottom .address {padding-bottom: 4px;}
footer #footer_bottom .address a {color: inherit; text-decoration: none;}




  /* sns */
.footer_sns {width: 40px; height: 40px; background: url(../img/footer/facebook_logo.png) center no-repeat; display: inline-block; text-indent: -9999px; overflow: hidden; margin-right: 10px;}
.footer_sns.x {background-image: url(../img/footer/x_logo.png);}





/* 메인 컨텐츠 (헤더 영역 고려) */
#w_necessity,
#o_outline {padding-top: 170px;}

/* ********************************************* */
/* 섹션 공통 */
section {padding: 120px 0;}
  /* 타이틀 */
.sec_title {color: var(--gray-900); font-weight: bold; font-size: 40px; text-align: center;}
.title_dark {color: #fff;} /* 어두운 배경 추가 */
.no_subtitle {margin-bottom: 20px;} /* 타이틀 서브타이틀 없음 추가 */

  /* 서브 타이틀 (타이틀 아래 내용) */
.sec_subtitle {color: var(--gray-600); font-size: 20px; text-align: center; margin: 16px auto 40px;}
.subtitle_dark {color: var(--gray-300);} /* 어두운 배경 추가 */

  /* 섹션 타이틀 위에 작은 타이틀 */
.sec_sm_title {color: var(--navy); font-weight: bold; margin-bottom: 4px; text-align: center;}
.sm_title_dark {color: var(--p-200);}

/* 카드 (아이콘 타이틀 내용 모양) */
  /* ul */
.card_warp {display: flex; gap: 10px 24px;}
.icon_card {flex: 1; text-align: center; padding: 40px; border-radius: 10px; background: #fff; position: relative;}
.icon_card img {margin: auto; object-fit: cover; width: 80px; height: 80px;}
  /* 카드 타이틀 */
.icon_card .card_title {font-size: 20px; font-weight: bold; margin: 20px auto 10px; }
.icon_card .card_contents {color: var(--gray-700); word-break: keep-all;}



/* 아이콘 없는 카드 타이틀 */
.icon_card .card_title_n  {margin: 0 0 20px;}


/* 체크 리스트 */
/* 아래 탭쪽에 있음 */

/* 인용 같은거 */
.quote {font-weight: var(--medium); color: var(--gray-600); margin: auto; text-align: center; position: relative; display: inline-block; left: 50%; transform: translate(-50%); word-break: keep-all;}
.quote::before,
.quote::after {content: ""; width: 50px; height: 96px; background: url(../img/quotes1.svg) top no-repeat; position: absolute; top: -12px;}
.quote::before {margin-left: -50px;}
.quote::after {background-image: url(../img/quotes2.svg); right: -50px;}
/* ********************************************* */



/* 2 Why Choose SmartCS? */
#m_why {padding-bottom: 0;}
#w_necessity .sec_title {padding: 0 20px;}
#w_necessity .sec_subtitle {padding: 0 20px;}


/* 3 핵심 구조와 성능 */

/* tap 탭 이미지 + 텍스트박스 */
.tab_container {max-width: 1100px; margin: auto;}
  /* 메뉴 바 */
.tab_menu {display: flex; justify-content: center; gap: 30px; margin-bottom: 30px;}
.tab_menu .tab {font-size: 20px; font-weight: var(--medium); color: var(--gray-700); padding: 4px 0; background: none; border: none; border-bottom: 4px solid transparent; cursor: pointer;}
.tab_menu .tab.active {color: var(--gray-900); font-weight: bold; border-color: var(--gray-900);}

  /* 탭 컨텐츠 */
  /* li */
.tab_con_warp {padding: 30px 40px; background: #fff; border-radius: 6px; display: flex; gap: 10px 40px; width: 100%; box-shadow: var(--boxShadow); box-sizing: border-box; display: none;}
.tab_con_warp.on {display: flex;}

    /* 이미지 */
.tab_contents img {border-radius: 6px; object-fit: cover; width: 320px; height: 240px;}
.tab_textbox {padding: 16px 0;}
.tab_con_title {font-size: 24px; font-weight: bold;}
.tab_con_sub {font-size: 18px; margin: 10px 0 20px; letter-spacing: -.2px;}

  /* 점 리스트 */
.tab_list_warp,
.dot_list_warp,
.check_list_warp {display: flex; flex-direction: column; gap: 10px; text-align: left;}
.tab_list,
.dot_list {color: var(--gray-700); position: relative; padding-left: 12px;}
.tab_list::before,
.dot_list::before {content: ""; width: 4px; height: 4px; background: var(--gray-500); position: absolute; left: 0; top: 8px; border-radius: 50%;}
  /* 체크 리스트 */
.check_list {position: relative; padding-left: 22px;}
.check_list::before {content: ""; width: 16px; height: 16px; background: url(../img/check-sm.png) center no-repeat; position: absolute; left: 0; top: 1px; border-radius: 50%;}



/* 4 적용사례 */
#m_reference {background: var(--linear);}
.rf-card_swiper {width: 100%; padding-bottom: 50px;}
#m_reference .card_warp {gap: 0; flex-direction: row;}
#m_reference .card_warp .reference_card {background-color: #fff; padding: 45px 50px; width: 580px; height: 320px; box-sizing: border-box; border-radius: 10px; position: relative; cursor: pointer;}
.reference_logo {height: 50px; width: auto;}
#m_reference .card_warp .reference_card>a {text-decoration: none;} /*카드 전체 링크*/
#m_reference .card_warp .reference_card p {color: var(--gray-700); font-size: 18px; margin: 43px 0 24px; height: 75px; word-break: keep-all;}
  /* 바로가기 링크 버튼 */
#m_reference .card_warp .quick_bt {width: 40px; height: 40px; text-align: right; border: 1px solid var(--gray-500); border-radius: 50%; position: absolute; right: 50px; background: url(../img/quick.png) center no-repeat; outline-offset: 5px;}

  /* 스크롤바 */
#m_reference .swiper-scrollbar {width: 100px; height: 8px; left: 50%; transform: translate(-50%); bottom: 0px; z-index: 50; background: #DADADA;}
#m_reference .swiper-scrollbar-drag {background: var(--pri_color);}
  /* 페이지네이션 */
#m_reference .swiper-pagination {display: none;}

/* 5 문의하기 */
  /* 컨텍트 전체 묶음 */
.contact_warp {display: flex; justify-content: center; gap: 50px; max-width: 950px; margin: auto;}
.contact_warp form {width: 100%; text-align: center;}

  /* * 필수 사항 알림 */
.alert_requ {color: var(--red); text-align: right; margin-bottom: 10px; font-size: 14px;}
  /* 문의 작성 전체 묶음 */
.contact_warp fieldset {gap: 10px; display: flex; flex-direction: column; flex: 1; margin-bottom: 20px; border: none;}

.contact_warp .contact_box {position: relative;}
  /* 문의 전체 input */
.contact_warp .contact_inp {padding: 15px 20px 15px 80px; border: none; display: block; font-size: 16px; border-radius: 6px; width: 100%; box-sizing: border-box;}
.contact_warp .contact_inp:focus {outline: none;}
  /* label 인풋명 */
.contact_warp label {font-size: 15px; position: absolute; top: 25px; left: 20px; transform: translateY(-50%);}

  /* 필수 * */
.contact_warp label.requ::after {content: "*"; color: var(--red); margin-left: 2px; margin-top: -2px; position: absolute;}


/* 제목 + 내용 묶음 */
.contact_warp .contact_con {position: relative;}

/* 상자 유효성 나와도 배경  */
.contact_con .contact_box {background: #fff; border-top-left-radius: 6px; border-top-right-radius: 6px;}
.contact_con .contact_box:last-child {border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;}

/* 제목과 내용 나누기 위한 선 (제목 컨텍트박스 바닥) */
.contact_warp .contact_con .contact_box:nth-of-type(1):after {content: ""; width: calc(100% - 40px); border-top: 1px solid #e4e4e4; position: absolute; bottom: 0; left: 20px;} 

/* 문의 제목 */
.contact_warp #user_title {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
/* 문의 내용적기 input textarea 부분 */
.contact_warp textarea.contact_inp {border: none; display: block; font-size: 16px; padding-left: 20px; border-top-left-radius: 0; border-top-right-radius: 0; resize: none;}

input::placeholder {color: var(--gray-400); font-family: 'Pretendard'; font-size: 16px; font-weight: normal; flex: 1;}

  /* 번호 화살표 없애기 */
input::-webkit-inner-spin-button {-webkit-appearance: none;}
input::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}

  /* 버튼 */
.contact_warp button {color: var(--gray-500); padding: 14px 0; width: 35%; background: #fff; border-radius: 4px; border: none; font-size: 16px; border: 1px solid transparent; margin-bottom: 5px; outline-offset: 5px;}
.contact_warp button:hover {background-color: var(--gray-200); border: 1px solid var(--gray-400);}
.contact_warp button:nth-of-type(2) {margin-left: 20px; background: var(--pri_color); color: #fff; font-weight: var(--medium);}
.contact_warp button:nth-of-type(2):hover {background-color: #3562E8; border-color: #3562E8;}

  /* 몇자 썼는지 */
.textLengthWrap {position: absolute; right: 20px; top: 15px; display: flex; font-size: 14px; color: var(--gray-400); display: none;}
.textLengthWrap.content {top: 2px;}

  /* 에러 메시지 */
.error {text-align: left; color: var(--red); padding-top: 8px; font-size: 14px; margin: 0 20px 0; display: none;}
.contact_con .error {padding-bottom: 6px; border-top: 1px solid #e4e4e4;}
.error.on {display: block;}

  /* 제출 후 메시지 */
.form_alert {padding: 10px 20px; width: 30%; text-align: left; background: var(--p-100); position: fixed; right: 0; margin-top: 20px; bottom: 30px; z-index: 500; display: none;}
.form_alert.fail {padding: 10px 20px; background: var(--r-200);}

/* 별도문의 */
  /* 묶음 */
.contact_warp .commu_warp {display: flex; flex-direction: column; gap: 50px; padding-top: 20px;}
.contact_warp .commu_title {padding-left: 28px;}
  /* 비포 아이콘 */
.contact_warp .commu_title::before {content: ""; width: 24px; height: 24px; position: absolute; margin: -2px 0 0 -28px; background: url(../img/contact_i/call.png) center;}
.contact_warp .fax::before {background-image: url(../img/contact_i/fax.png);}
.contact_warp .email::before {background-image: url(../img/contact_i/email.png);}

  /* 실제 연락 링크 내용 */
.commu_con {text-decoration: none; color: var(--gray-900); font-size: 24px; font-weight: bold; margin: 6px 0 0 2px; display: block;}







/* ************************
          서브페이지
  ************************* */

/* ******** Why SmartCS ******** */
/* 1 necessity */
#w_necessity {background: var(--linearDark); padding-bottom: 0;}
#w_necessity .sec_subtitle {margin: 40px auto 80px;}

  /* 가로로 긴 사각 long_card */
.long_card {padding: 40px 20px; background: rgba(0, 0, 0, .15);}
.long_card:nth-of-type(2) {background: rgba(0, 0, 0, .1);}
.long_card:nth-of-type(3) {background: rgba(0, 0, 0, .05);}
.long_card_con {display: flex; gap: 30px; justify-content: center; max-width: 640px; margin: auto; align-items: center;}

.long_card img {width: 100px; height: 100px;}
.long_card_textbox {width: 100%;}
.long_card_title {font-size: 20px;font-weight: bold; margin-bottom: 20px;}




/* 2 */
  /* 카드와 카드 전체 타이틀 묶음 */
#w_features .feat_warp {margin-top: 80px; position: relative;}
  /* 인용같은 타이틀 */
#w_features .quote {font-size: 32px;}

#w_features .card_warp {margin-top: 40px;}

  /* 아이콘 없는 카드 타이틀 */
#w_features .icon_card .card_title {margin: 0 0 20px;}
  /* 윗 묶음 아이콘있는 부분 */
#w_features .top_warp .icon_card {text-align: left; display: flex;}
#w_features .top_warp .icon_card img {position: absolute; right: 5%; width: 100px; height: 100px;}

  /* 점리스트 가운데 */
#w_features .dot_list_warp {margin: auto; width: fit-content;}


/* 3 w_apply */
  /* 메뉴 */
#w_apply {background: var(--bg-blue);}
/* #w_apply .tab_menu {gap: 10px; font-size: 14px;} */
#w_apply .tab_menu .tab.active {color: var(--pri_color); border-color: var(--pri_color);}
#w_apply .tab_menu .tab {color: var(--gray-900);}

#w_apply .tab_container {max-width: 1200px; padding: 0 100px; box-sizing: border-box; position: relative;}

/* 탭 넘기는 버튼 이전 다음 */
.tab_arrow {background: url(../img/why/tab_btn_arrow.png); text-indent: -9999px; overflow: hidden; width: 72px; height: 72px; border: none; position: absolute; top: 50%; left: 0;}
.prev_btn {rotate: 180deg; margin-left: -20px;}
.prev_btn:hover {margin-left: -20px;}
.next_btn {left: auto; right: 0; margin-right: -20px;}

/* 4 w_expectat */
#w_expectat .icon_card {padding: 40px 20px;}

  /* 체크 리스트 */


/* ******** Why SmartCS ******** */
/* ******** Overview ******** */
/* 1 outline */
#o_outline {background: var(--linearDark);}
#o_outline .sec_subtitle {margin: 40px auto;}
.sec_subcon {text-align: center; margin-bottom: 80px;}

  /* ul 겹치는 원 카드 */
.circle_card_warp {display: flex; gap: -30px; font-weight: var(--medium); color: #fff; text-align: center; margin: auto;; justify-content: center;}
  /* li */
.circle_card {width: 296px; height: 296px; background: rgba(255, 255, 255, .1); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; font-size: 20px}
.circle_card:first-child {margin-right: -35px;}
.circle_card:last-child {margin-left: -35px;}
.circle_card img {max-width: 48px;}

/* 2 architecture */
#o_architecture {background: #fff;}
#o_architecture .img_warp {max-width: 1200px;}
#o_architecture img {max-width: 700px; width: 100%; margin: auto;}
.caption {text-align: center;}

/* 3 access보안인증 */
#o_access {background: var(--bg-blue);}
#o_access img {max-width: 840px; margin: 0 auto 30px; width: 100%;}
#o_access .icon_card {padding: 40px 20px;} 
#o_access .dot_list_warp {margin: auto; width: fit-content;}

/* 4 */
  /* 감싸는거 1200 */
.warp_1200 {max-width: 1200px; margin: auto;}

  /* 아웃라인 선 추가 */
.line_box {border: 3px solid var(--sub_color);}

/* 5 */
#o_compat {background: var(--linear);}
#o_compat .long_card {background: #fff; margin-bottom: 10px;}

/* 6 탭 컨텐츠 */
#o_spec {background: #fff;}
#o_spec .tab_container {max-width: 1100px; margin-top: 16px;}
#o_spec .tab_contents img {max-width: 900px; width: 100%; height: auto; margin: auto;}

  /* li table 탭 */
.table_warp {display: none;}
.table_warp.on {display: block;}

  /* table */
.table_box {display: flex; width: 100%; gap: 0;}
.option_table {width: 100%; border-color: var(--gray-100); border-collapse: collapse;}
.option_table colgroup col:first-child {width: 25%;}
th, td {font-size: 14px; height: 40px; font-weight: normal; padding: 5px; box-sizing: border-box; word-break: keep-all; border: 1px solid var(--gray-200);}
th {background: var(--gray-50);}

  /* 첫번째 탭 테이블 선 끊김 */
.spec:first-child tr:first-child th,
.spec:first-child tr:first-child td {border-top: none; border-right: none;}
    /* 선 채우기 */
.table_warp:first-child .table_box {border-top: 1px solid var(--gray-200);}
.tr_remove {border-right: 1px solid var(--gray-200);}
.tr_remove td {border: none; height: 42.5px;} /* 아무것도 없는 칸 */
    /* 겹치는 선 지움 */
.spec:nth-of-type(2) tr th {border-left: none;}
  /* 세줄 테이블 옆 길이 맞추기 */
.three_line td {height: 57px;}

  /* 두번째 탭 테이블 */
.table_subcon {font-size: 20px; color: var(--gray-600); margin: auto; text-align: center; margin-bottom: 30px; word-break: keep-all;}
.table_subcon span {font-weight: bold;}

.model {text-align: center; overflow: auto; height: 400px;}
.model colgroup col:first-child {width: 14%;}
.model colgroup col:not(:first-child) {width: 28.66%;}
.model tbody tr th {background: #fff;}

.table_bold {font-weight: bold; white-space: nowrap;}
.table_sticky {position: sticky; top: 100px;}



/* ******** Overview ******** */
/* ******** reference ******** */
#reference {background: #fff;}
  /* 탭메뉴 디자인 */
#reference .tab_menu {gap: 0px; margin: auto; margin-bottom: 40px;}
#reference .tab_menu .tab {border: 1px solid var(--gray-500); color: var(--gray-900); padding: 10px 20px; max-width: 190px; width: 100%; height: 46px; box-sizing: border-box; font-size: 16px; display: flex; align-items: center; justify-content: center; text-align: center; word-break: keep-all;}
#reference .tab_menu .tab.active {border: 1px solid var(--pri_color); color: var(--pri_color);}

  /* 탭 전체 묶음 */
#refer_tab {width: 100%; max-width: 100%;}
#refer_tab .tab_con_warp {padding: 0; box-shadow: none;}
#refer_tab .tab_con_warp.on {display: block;}

.reference_warp {position: relative;}

.company {box-shadow: var(--boxShadow); background: #fff; border-radius: 6px; display: flex; margin-bottom: 36px; padding: 20px 30px; gap: 10px 30px; word-break: keep-all;}
#refer_tab .reference_logo {border-radius: 0; height: 50px; width: auto; margin-bottom: 20px;}

.tab_contents .company_img_warp img {width: auto; max-width: 342px; height: auto; border-radius: 4px;}
/* 이미지와 인터뷰 묶는 */
.refer_img_warp {display: flex; gap: 10px 24px; position: relative;}
.refer_img_warp .interview_img {max-width: 250px; height: auto;}
.refer_img_warp .interview_img.map_img {max-width: 342px; height: auto;}

.interview_row {display: flex; gap: 24px;}

  /* 사진 아래 캡션 */
#reference .caption {font-size: 14px; color: var(--gray-600); text-align: left; margin-top: 8px;}

  /* 작은 인용 */
.quote_sm_warp {text-align: center;}
.quote_sm  {margin: 20px; color: var(--gray-400); font-size: 20px;}
  /* 인용 */
.quote_warp {background: #F6F8FC; padding: 50px 35px; margin-bottom: 36px;}
#reference .quote {font-size: 24px; font-weight: normal;}
#reference .quote_warp .caption {text-align: center;}

.tab_con_warp:nth-of-type(1) .quote::after {right: 65px;}
.tab_con_warp:nth-of-type(2) .quote::after {right: -22px;}
.tab_con_warp:nth-of-type(3) .quote::after {right: -30px;}
.tab_con_warp:nth-of-type(4) .quote::after {right: 105px;}

  /* 인터뷰 */
.interview {margin-bottom: 36px; /* line-height: 1.4 */;}
.refer_title {font-size: 22px; font-weight: bold; margin-bottom: 8px;}
.refer_subtit {font-size: 18px; font-weight: var(--medium); margin-bottom: 10px;}
.refer_con {margin-bottom: 12px; color: var(--gray-900); max-width: 1180px;}
  /* 출처 */
#reference .r_source {display: flex; gap: 10px; align-items: center; justify-content: flex-end; color: var(--gray-600); font-size: 14px;}
#reference .r_source img {width: 276px; height: auto;}
/* ******** reference ******** */
/* ******** media ******** */
#md_media {background: #162C5A;}

  /* 큰이미지 */
#media_con img {width: 100%; aspect-ratio: 16/9; border-radius: 3px;}
#media_con iframe {width: 100%; aspect-ratio: 16/9; border-radius: 3px; border: none;}
  /* 작은 이미지 목록 */
.media_warp {display: flex; gap: 10px 24px; margin-top: 20px;}
.media_list p {font-size: 20px; color: #fff; text-align: center; padding: 10px 0;}
.media_list img {width: 100%; box-sizing: border-box; object-fit: cover; border: 3px solid transparent; border-radius: 3px;}
.media_list img.on {border: 3px solid var(--sub_color);}

#md_down {background: #fff;}
.down_warp {border-top: 1px solid var(--gray-600);}
.down_list {display: flex; position: relative; border-bottom: 1px solid var(--gray-300); padding: 12px 20px; justify-content: space-between; align-items: center; word-break: keep-all;}
.down_list div {display: flex;}
.down_title {font-size: 20px; font-weight: var(--medium); }
.down_sub {color: var(--gray-600); padding: 4px 10px;}
.down_list a {text-decoration: none; color: var(--gray-900); border: 1px solid var(--gray-300); border-radius: 6px; padding: 6px 20px; padding-right: 48px; word-break: keep-all;}
.down_list a::after {content: ""; width: 24px; height: 24px; position: absolute; background: url(../img/download.png) center /contain; margin-left: 4px; margin-top: -4px;}

/* ******** media ******** */
/* ******** Contact-us ******** */
#c_map {background: #fff;}

#c_map .sec_title {margin-bottom: 40px;}
.map_warp {max-width: 1200px; width: 100%; margin: auto;}

.root_daum_roughmap {height: 100%;}
.root_daum_roughmap .wrap_controllers {display: none;}
.root_daum_roughmap .cont {display: none;}

#c_map .address {display: flex; color: var(--gray-600); justify-content: center; gap: 60px; padding: 20px 0; border-bottom: 1px solid var(--gray-300);}
#c_map .address p:first-child {word-break: keep-all;}

#c_map .public_trans {display: flex; justify-content: space-evenly; margin-top: 30px; gap: 30px 20px;}
#c_map .public_trans .trans_title {font-size: 20px; font-weight: bold; margin-bottom: 20px;}

#c_map .public_trans .trans_warp>li {display: flex; gap: 2px 6px; align-items: center;} /* 대중교통 리스트 */
#c_map .public_trans .trans_warp>li:not(:last-child) {margin-bottom: 16px;} /* 대중교통 리스트 */

#c_map .public_trans .subway {padding-left: 30px;}
#c_map .public_trans .subway::before {content: "2"; font-size: 12px; color: #fff; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; position: absolute; background: #00A23F; border-radius: 50%; margin-left: -30px;} /* 2호선 */
#c_map .public_trans .subway:last-child:before {content: "7";background: #6E7E31;} /* 7호선 */

#c_map .public_trans .bus {color: var(--gray-900);}
#c_map .public_trans .bus::before {background-color: var(--gray-900);}

.trans_walk {color: var(--gray-600); font-size: 14px;}


/* ******** Contact-us ******** */ 
/* ******** privacy ******** */
#privacy {padding-top: 80px; background: #fff;}
.privacy_title {color: #fff; text-align: center; font-size: 30px; background: url(../img/privacy.jpg) center / auto 180px no-repeat; width: 100%; height: 180px; position: relative;}
.privacy_title h1 {font-size: 30px; font-weight: bold; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}

.privacy_warp {display: flex; flex-direction: column; gap: 24px; margin-top: 40px; margin: auto; margin-top: 40px; max-width: 1000px;}
.privacy_sub {font-size: 20px; font-weight: bold;}
.pr_con_title {font-weight: bold; margin-bottom: 4px;}
.pr_con_contents {font-size: 14px; line-height: 1.4;}

#privacy a {text-decoration: none; color: var(--gray-900);}
/* ******** privacy ******** */


/* 줄어도 너무 벽에 안 붙게 함 */
@media (max-width: 1440px) {
  .container {padding: 0 24px;}
}

@media (max-width: 1120px) {
/* 준비중 섹션 */
.ready {height: calc(100vh - 343px);}

/* 헤더 */
/* header {height: 45px;} */
    /* 메뉴 버튼 */
header .container_sb #menu {display: block;}
  /* 주요서비스 nav */
header nav {position: absolute; background: #fff; top: 70px; width: 100%; height: calc(100vh - 70px); right: 0; right: -100%; flex-direction: column; align-items: flex-end; justify-content: space-between;  -webkit-transition: right .3s;  transition: right .3s;}

    /* 메뉴 */
header nav ul li {width: 100%;}
header nav ul a {padding-left: 40px;}
header nav ul a:hover,
header nav ul a:focus {background-color: var(--gray-100);}
  /* 헤더 켜진 페이지 on */
header nav ul a.on {color: var(--gray-900);}

    /* 오른쪽에서 나오게 */
header nav.on {right: 0;}
header nav ul {flex-direction: column;}
    /* 타임솔루션 버튼 */
    header .ts_bt {display: none;}
    /* 모바일 a태그 */
header #ts_bt_mob {display: block; margin-bottom: 60px; margin-right: 40px; z-index: 500;}


/* 푸터 */
footer .container_sb {flex-direction: column; gap: 10px;}

footer #footer_bottom {flex-direction: column; gap: 10px;}



.container {padding: 0 24px;}

/* ********************************** */
/* 2 why */

    /* br 없애기 pc만 모바일만 */
.pc_only {display: none;}
.mob_only {display: block;}

    /* card */
.card_warp {flex-direction: column; max-width: 950px; margin: auto;}

  /* 4개 이상 카드 (4개라서 중간에 2줄 됨) 추가 */
.card_four_more {display: grid; gap: 24px; grid-template-columns: 1fr 1fr;}

#w_apply .tab_container {padding: 0 30px;}

/* 5 contact */
.contact_warp {flex-direction: column; max-width: 700px; align-items: center;}
.contact_warp .commu_warp {width: 100%; justify-content: center}

}

/* ************************
          서브페이지
  ************************* */
/* ******** Why SmartCS ******** */
/* 탭 넘기는 버튼 이전 다음 */
.tab_arrow {width: 48px; height: 48px; background-size: 48px;}


/* ************ 모바일 ************ */
@media (max-width: 900px) {
  .table_box {flex-direction: column;}
/* 준비중 섹션 */
.ready {height: calc(100vh - 252px);}
.ready img {padding-top: 20px; width: 64px;}

/* 900에 보일거 */
.mob_only_re {display: block;}
/* 헤더 */
header {height: 50px;}
header #hd_logo {height: 28px;}

header nav {top: 50px; height: calc(100vh - 50px);}


/* 푸터 */
footer .container_sb {padding: 20px 24px;}

footer #footer_logo {height: 24px;}

footer #footer_top a {font-size: 14px;}
#family-site {font-size: 14px; padding-right: 30px; width: 120px;}
#family-site span {top: 12px;}
#f_site_list {margin-top: -149px;}
#f_site_list a {padding: 10px 0 10px 20px; width: 120px;}

footer #footer_bottom {gap: 6px;}
footer #footer_bottom .address {font-size: 14px;}
/* #footer_sns_warp {margin-left: -10px;} */
.footer_sns {margin-right: 6px;}


/* 슬라이드 */
.intro .slide_textbox {left: 10%;}
.intro .swiper-slide .slide_title {font-size: 24px; word-break: keep-all;}
.intro .swiper-slide .slide_sub {font-size: 16px; word-break: keep-all;}
  /* 스크롤유도 */
.intro #scroll_down {font-size: 12px; padding-bottom: 30px; bottom: 20px;}
.intro #scroll_down span:nth-of-type(1) {top: 20px;}

/* 섹션 */
section {padding: 60px 0;}
  /* 위에 더해야하는 섹션 */
#w_necessity,
#o_outline {padding-top: 90px;}

  /* 섹션 타이틀 */
.sec_title {font-size: 24px}
.sec_subtitle {font-size: 16px; word-break: keep-all; margin-bottom: 20px;}
.sec_subcon {font-size: 14px; margin-bottom: 40px;}
  /* 섹션 타이틀 위에 작은 타이틀 */
.sec_sm_title {font-size: 14px;}

#w_features .quote {font-size: 24px;}

.quote::before, .quote::after {width: 32px; height: 70px; background-size: 24px;}
.quote::before {margin-left: -34px;}
.quote::after {right: -34px;}




/* 2 why */


  /* 아이콘 이미지 줄임 */
.icon_card {padding: 30px 20px;}
.icon_card img {width: 50px; height: 50px;}

/* 3 */
.tab_menu {margin-bottom: 20px; gap: 20px;}
.tab_menu .tab {font-size: 16px;}

    /* 탭 콘텐츠 */
.tab_con_warp {flex-direction: column; gap: 10px; max-width: 700px; margin: auto}
.tab_contents img {width: 100%;}
.tab_textbox {padding: 10px 0;}
.tab_con_title {font-size: 18px;}
.tab_con_sub {font-size: 16px;}

.tab_list_warp {gap: 4px;}


  /* 4 */
#m_reference .card_warp .reference_card {height: 250px; padding: 30px 20px;}
#m_reference .card_warp .reference_logo {height: 40px;}
#m_reference .card_warp .reference_card p {font-size: 15px; margin: 20px 0 10px; height: 90px;}
#m_reference .card_warp .quick_bt {right: 30px;}
#m_reference .swiper-scrollbar {width: 50px; display: none;}
#m_reference .swiper-pagination {display: block;}


  /* 5 */
.contact_warp {max-width: 500px;}
.contact_warp button {font-size: 15px; width: 45%;}

.textLengthWrap {font-size: 12px;}

  /* 제출 후 메시지 */
.form_alert {width: calc(100% - 80px); right: 50%; transform: translate(50%); border-radius: 4px; text-align: center; }

/* 별도문의 */
.contact_warp .commu_warp {flex-wrap: wrap; max-width: 500px; justify-content: flex-start; gap: 30px;}
.contact_warp .commu_title {font-size: 14px;}
.commu_con {font-size: 20px;}



/* ************************
          서브페이지
  ************************* */

/* ******** Why SmartCS ******** */
/* 1 necessity */
#w_necessity .sec_subtitle {margin: 20px auto 40px;}
    /* 가로로 긴 사각 long_card */
    /* 이미지 없애고 카드 크기 좀 줄임 */
#w_necessity .long_card_con {max-width: 510px;}
.long_card img {display: none;}

/* 2 */
  /* 윗 묶음 아이콘있는 부분 */
#w_features .top_warp .icon_card img {width: 70px; height: 70px; margin-top: -15px;}
#w_features .top_warp .icon_card div {margin: auto; text-align: center;}

/* 전체 타이틀 묶음 */
#w_features .feat_warp {margin-top: 40px;}
  /* 4개 이상 카드 */
.card_four_more {gap: 10px;}
/* ******** Why SmartCS ******** */
/* ******** Overview ******** */
  /* 1 */
#o_outline .sec_subtitle {margin: 20px auto;}

.circle_card_warp {flex-direction: column; align-items: center; gap: 4px;}
.circle_card {width: 170px; height: 130px; font-size: 16px; gap: 6px; border-radius: 6px; width: 100%;}
.circle_card:first-child,
.circle_card:last-child {margin: 0;}
.circle_card img {max-width: 36px;}

#o_access img {margin-bottom: 20px;}
  /* 2 */
.caption {font-size: 14px;}
  /* 5 */
#o_compat .long_card { border-radius: 6px; text-align: center;}
#o_compat .dot_list_warp  {width: fit-content; margin: auto;}

  /* 6 탭 테이블 */
.tr_remove {display: none;}
.table_subcon {font-size: 15px; line-height: 1.2;}

.spec colgroup col:first-child {width: 20%;}
.spec:first-child tr:first-child td {border-right: 1px solid var(--gray-200);}
    /* 겹치는 선 지움 */
.spec:nth-of-type(2) tr th {border: 1px solid var(--gray-100);}
.spec:nth-of-type(2) tr:nth-of-type(2) th,
.spec:nth-of-type(2) tr:nth-of-type(2) td {border-top: none;}
  /* 세줄 테이블 옆 길이 원복 */
.three_line td {height: 40px;}
/* ******** reference ******** */
#reference .tab_menu {flex-wrap: wrap; max-width: 581px; gap: 6px;}
#reference .tab_menu .tab {border-radius: 4px;}
.company_img_warp {margin-top: 80px;}
.tab_contents .company_img_warp img {max-width: 200px;}

/* 이미지와 인터뷰 묶는 */
.refer_img_warp .interview_img {max-width: 160px; width: auto;}
.refer_img_warp {flex-direction: column; margin-top: -10px;}

.refer_img_warp .interview_img.map_img {max-width: 240px; margin-top: -40px; margin-bottom: 36px;}

.interview_row {flex-direction: column;}

  /* 사진 아래 캡션 */
#reference .caption {font-size: 12px; margin-bottom: 6px;}

  /* 작은 인용 */
.quote_sm_warp {text-align: center; display: flex;}
.quote_sm  {margin: auto; margin-top: 64px; color: var(--gray-400);}
  /* 인용 */
.quote_warp {position: relative;}
#reference .quote {font-size: 20px;}
.tab_con_warp:nth-of-type(4) .quote::after {right: 50px;}

  /* 인터뷰 */
.refer_title {font-size: 20px;}

  /* 출처 */
#reference .r_source {font-size: 12px;}
#reference .r_source img {width: 190px;}

/* ******** reference ******** */
/* ******** media ******** */
.media_warp {margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr;}
.media_list p {font-size: 16px;}

.down_list div {flex-direction: column;}

.down_title {font-size: 16px;}
.down_sub {padding-left: 0; font-size: 14px;}

.down_list a {padding: 6px 38px 6px 10px; margin-left: 10px;}
.down_list a::after {width: 20px; height: 20px; margin-top: -2px;}

/* ******** media ******** */
/* ******** Contact-us ******** */
.map_warp {height: 400px;}
#c_map .address {gap: 20px; font-size: 14px;}

#c_map .public_trans .trans_title {font-size: 18px;}
#c_map .public_trans .trans_warp>li {flex-wrap: wrap; align-items: flex-start;}
#c_map .public_trans .subway::before {margin-top: -2px;}
.trans_walk {font-size: 12px; margin-top: 3px;}
/* ******** Contact-us ******** */
/* ******** privacy ******** */
#privacy {padding-top: 60px;}
.privacy_title {max-height: 90px; background-size: auto 130px;}
.privacy_title h1 {font-size: 24px;}
.privacy_sub {font-size: 16px;}
}

/* ************** 작을 때 ************** */
@media (max-width: 500px) {
.ready {height: calc(100vh - 268px);}
/* 500에 보일거 */
.mob_only_500 {display: block;}

footer #footer_bottom .address {font-size: 12px;}

.icon_card .card_title {font-size: 18px;}

/* main */
  /* 슬라이드 */
.intro .slide_textbox {left: auto;}


/* 2w */
  /* 인용같은 타이틀 */
#w_features .quote {font-size: 20px;}
#w_features .top_warp .icon_card img {display: none;}

.tab_menu {gap: 10px; text-align: center; }
#w_apply .tab_container {padding: 0;}

/* 탭 넘기는 버튼 이전 다음 */
.tab_arrow {display: none;}

.card_four_more {display: flex;}

/* 3o */
.caption {font-size: 12px;}
  /* 탭 */
#o_spec .spec colgroup col:first-child {width: 22%;}
th, td {font-size: 13px;}

/* 4r */
.company_img_warp {display: none;}

#reference .quote {font-size: 16px;}
.tab_con_warp:nth-of-type(1) .quote::after {right: -10px;}
.tab_con_warp:nth-of-type(2) .quote::after {right: -16px;}
.tab_con_warp:nth-of-type(4) .quote::after {right: -25px;}

#reference .tab_menu .tab {max-width: 100%;}

/* 5me */
.down_list a {width: 48px; height: 48px; box-sizing: border-box;}
.down_list a span {display: none;}
.down_list a::after {top: 50%; transform: translateY(-50%);}

/* 6c */
.map_warp {height: 300px;}
#c_map .public_trans {flex-direction: column;}
#c_map .public_trans .trans_warp>li {font-size: 14px; align-items: center;}
}

@media (max-width: 374px) {
  #w_apply .tab_menu {gap: 6px;}
}